// free · runs in your browser · nothing uploaded
Colour Contrast Checker
Check if your text and background colours pass WCAG 2.2 AA and AAA, get the closest colour that passes, convert between HEX, RGB and HSL, and make a 50–900 shade scale.
1. Your colours
Contrast ratio
4.83:1
Good
- Normal text · AA (4.5:1)PASS
- Large text · AA (3:1)PASS
- Normal text · AAA (7:1)FAIL
- Large text · AAA (4.5:1)PASS
- Buttons, icons, borders (3:1)PASS
Normal text: the quick brown fox jumps over the lazy dog.
Large text (24 px or 19 px bold)
Closest text colours that pass
2. Colour codes (tap to copy)
Shades of the text colour (tap to copy)
Contrast is worked out with the WCAG 2.2 formula. Large text means at least 24 px, or 18.66 px (14 pt) bold. Ratios are rounded down so a near miss never shows as a pass.
📚 Official sources: WCAG 2.2
We build every tool from the official rules and re-check them when they change. Always confirm with the official source before you rely on a result.
🛠️ Spotted a mistake or an out-of-date rule? Tell us
Questions people ask
What contrast ratio do I need?+
WCAG 2.2 level AA needs at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for buttons, icons and input borders. Level AAA needs 7:1 for normal text and 4.5:1 for large text.
Is AA enough?+
AA is the level most accessibility laws and policies ask for, including the European Accessibility Act, the ADA guidance in the US and most government websites. AAA is stricter and recommended for long reading text.
How does the tool suggest a fix?+
It keeps the hue and saturation of your text colour and only makes it darker or lighter, step by step, until it reaches the ratio you need. It picks the smallest change so your design still looks the same.
Why is #777777 on white a fail?+
Its ratio is 4.479:1, just under 4.5:1. WCAG says not to round up, so it fails AA for normal text. #767676 is the lightest grey that passes on white.