Color Contrast Checker
Pick a text colour and a background colour to get the exact WCAG contrast ratio, with AA and AAA pass or fail for normal and large text — plus a live preview of how the combination actually looks.
Your result will appear here
Contrast result
Large text preview
Normal text preview — the quick brown fox jumps over the lazy dog.
Ratio is calculated with the WCAG 2 relative-luminance formula. Black on white scores 21:1 — the highest possible.
How to use
- Pick a text colour and a background colour with the colour pickers, or type a hex code such as #7C5CFF.
- The contrast ratio and the AA / AAA results update instantly, and the preview shows the combination at normal and large sizes.
- Aim for at least AA normal text (4.5:1) for body copy; use AAA (7:1) when you want the strongest readability.
Frequently asked questions
What is a contrast ratio?
The contrast ratio measures how different two colours look, from 1:1 (identical colours, no contrast at all) to 21:1 (black on white, the maximum). It is calculated from the relative luminance of each colour using the formula in the WCAG 2 guidelines.
What do AA and AAA mean?
They are conformance levels from the Web Content Accessibility Guidelines (WCAG). AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
In WCAG, large text is at least 18pt (about 24px) regular weight, or at least 14pt (about 18.66px) bold. Larger text is easier to read, so it is allowed a lower contrast ratio.
Does passing mean my design is accessible?
Contrast is only one part of accessibility. Passing AA is a strong start, but readable font sizes, clear wording, keyboard navigation and not relying on colour alone to convey meaning all matter too.