Color Contrast Checker
Check the contrast ratio between a text and background colour against WCAG 2.1 AA and AAA, preview it, and get the closest text colour that passes.
Normal text: the quick brown fox jumps over the lazy dog.
Large text (18pt / 24px, or 14pt bold)
ButtonContrast ratio
4.75:1
- Normal text — AA (4.5:1)✓ Pass
- Normal text — AAA (7:1)✗ Fail
- Large text — AA (3:1)✓ Pass
- Large text — AAA (4.5:1)✓ Pass
- Icons, borders, UI controls — AA (3:1)✓ Pass
Uses the WCAG 2.1 contrast formula. Everything runs in your browser.
This tool is temporarily unavailable.
Please check back later.
How to use this tool
- 1Enter the text colour and the background colour as hex codes, or pick them with the colour pickers.
- 2Check the preview and the contrast ratio.
- 3See which WCAG levels pass for normal text, large text and UI elements.
- 4If AA fails, apply the suggested closest text colour that passes.
Features
- WCAG 2.1 contrast ratio from 1:1 to 21:1.
- AA and AAA results for normal and large text, plus the 3:1 rule for icons and controls.
- Live preview of text, large text and a button in your colours.
- Suggests the nearest darker or lighter text colour that reaches 4.5:1.
- Swap colours in one click.
Privacy
Everything runs in your browser.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for icons and control borders. AAA raises text to 7:1 and large text to 4.5:1.
Why does 4.49:1 fail AA?
WCAG thresholds are exact: a ratio must be at least 4.5. This tool rounds the displayed ratio down, so what you see never looks like a pass when it isn’t.
Does it work with transparent colours?
Enter the colour as it appears on the page. For a semi-transparent text colour, blend it with the background first, then check the result.
Is contrast the only accessibility check for colour?
No. Also avoid using colour alone to convey meaning — add text, icons or patterns — so colour-blind users get the same information.