colorIsReadable

👓 Checks if the contrast between two colors meets WCAG standards.

Syntax

import { colorIsReadable } from '@opentf/std';
colorIsReadable({ color1: any; color2: any; level?: 'AA' | 'AAA' | 'AA_Large' | 'AAA_Large' }): boolean

• color1: The first color.

• color2: The second color.

• level: The WCAG level to check against (default: 'AA').

  • 'AA': Minimum contrast ratio of 4.5:1.

  • 'AA_Large': Minimum contrast ratio of 3:1.

  • 'AAA': Minimum contrast ratio of 7:1.

  • 'AAA_Large': Minimum contrast ratio of 4.5:1.

Examples

colorIsReadable({ color1: 'black', color2: 'white' }); //=> true
colorIsReadable({ color1: 'gray', color2: 'white' }); //=> false
colorIsReadable({ color1: 'gray', color2: 'white', level: 'AA_Large' }); //=> true

Try it