🎨 Returns the WCAG conformance level for the contrast ratio between two colors.

Syntax

TypeScript
import { colorWCAGLevel } from '@opentf/std';

colorWCAGLevel(color1: any, color2: any): 'A' | 'AA' | 'AAA' | 'FAIL'

Parameters

NameTypeDescription
color1anyThe first color.
color2anyThe second color.

Returns

The WCAG conformance level: 'A' (3:1+), 'AA' (4.5:1+), 'AAA' (7:1+), or 'FAIL'.

Examples

TypeScript
colorWCAGLevel('#000', '#fff') //=> 'AAA'

colorWCAGLevel('#000', '#999') //=> 'AAA'

colorWCAGLevel('#000', '#767676') //=> 'AA'

colorWCAGLevel('#000', '#595959') //=> 'A'

colorWCAGLevel('rgb(0,0,0)', 'rgb(255,255,255)') //=> 'AAA'
Last updated on
Edit this page