Color Contrast Checker
WCAG AA / AAA contrastRuns locally · nothing uploaded
Large heading sample
Sample text: The quick brown fox jumps over the lazy dog.
Contrast ratio
4.76 : 1
Good
Normal textAA PassAAA Fail
Large text (≥ 24px or ≥ 18.5px bold)AA PassAAA Pass
Icons & UI componentsAA Pass
Also works as:wcag contrast checkeraccessible colorstext contrast
How to use
- 1Choose text and background colors.
- 2Read the ratio and AA/AAA results.
- 3Click the suggestion to fix failing colors.
FAQ
What ratio do I need?
AA: 4.5:1 for normal text and 3:1 for large text. AAA: 7:1 and 4.5:1.
How is contrast calculated?
(L1 + 0.05) ÷ (L2 + 0.05) using relative luminance, from 1:1 to 21:1.