Color Contrast Checker

Check the contrast ratio between two colors against WCAG AA and AAA accessibility standards.

Sample Text Aa
Contrast ratio
AA Normal (4.5:1)
AA Large (3:1)
AAA Normal (7:1)
AAA Large (4.5:1)
About this tool

How Contrast Ratio Is Calculated

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+, or bold 14pt+); AAA requires 7:1 and 4.5:1 respectively.

FAQ

Frequently Asked Questions

What contrast ratio do I need for WCAG AA?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold).

What contrast ratio do I need for WCAG AAA?

WCAG AAA, the stricter standard, requires at least 7:1 for normal text and 4.5:1 for large text.

How is contrast ratio calculated?

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.

Related Tools

More Dev Tools

Base64 EncoderBcrypt GeneratorColor PickerCron ParserCSS MinifierCSV ⇄ JSON