Color contrast checker
Test any text and background color pair against WCAG 2.2. Results update as you type.
Try a pair:
7.9:1
AA normal textAAA normal textAA large textAAA large textUI components
Large heading text
Normal body text looks like this. The quick brown fox jumps over the lazy dog.
FAQ
What contrast ratio do I need?
WCAG 2.2 requires at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and UI components to pass level AA. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
How is contrast ratio calculated?
The ratio compares the relative luminance of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Pure black on white is 21:1; identical colors are 1:1.
What should I do if my colors fail?
Darken the text color or lighten the background until the ratio passes. The suggestions below show the nearest passing shade of your foreground color.