Color Contrast Checker – WCAG AA and AAA Contrast Ratio
Make sure your text is readable for everyone. Enter a text and background colour to get the WCAG contrast ratio, pass/fail results for AA and AAA, a live preview and a fix suggestion.
Enter the text colour and the background colour as HEX, RGB or HSL, or use the pickers. The tool calculates the contrast ratio, for example 4.83:1, and shows whether it passes WCAG AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 and 4.5:1). If it fails, it suggests the nearest passing text colour.
How to use Color Contrast Checker
- Enter or pick the text colour.
- Enter or pick the background colour.
- Read the contrast ratio and the WCAG results.
- Check the live preview with heading, body text and a button.
- Use the suggested colour if the pair fails.
WCAG contrast requirements
The Web Content Accessibility Guidelines (WCAG 2.x) define minimum contrast ratios between text and its background. The ratio goes from 1:1 (same colour) to 21:1 (black on white).
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
“Large text” means at least 24 px regular or about 18.7 px bold. UI components include input borders, icons and focus rings. AA is the common legal and practical target; AAA is stricter and worth aiming for in long reading texts.
How the ratio is calculated
Each colour is converted to its relative luminance, which weighs green much more than blue because our eyes are more sensitive to it. The ratio is (lighter + 0.05) ÷ (darker + 0.05). The checker rounds down, as WCAG requires, so 4.499 counts as a fail.
Fixing low contrast
When a pair fails, the tool keeps the hue and saturation of your text colour and makes it darker or lighter until it reaches 4.5:1, so your brand colour stays recognisable. Other options: darken the background, use bold or larger text, or reserve the low-contrast colour for decoration. Grey text on white is the most common failure — #767676 is the lightest grey that passes AA on white.
Beyond the numbers
Contrast is one part of accessibility. Do not rely on colour alone to show errors or links, keep text on photos readable with an overlay, and check both light and dark mode. To build a palette, use the Color Palette Generator; to pick colours from a design, use the Color Picker from Image; to convert values, use HEX to RGB Converter.
Legal requirements
In the EU, the European Accessibility Act applies to many websites and apps from June 2025 and refers to WCAG AA. Public-sector sites in the US (Section 508) and many other countries have similar rules. Checking contrast early is far cheaper than redesigning later, and it helps everyone reading on a phone in sunlight.
You may also find these free tools useful: JSON Formatter, Password Generator and Regex Tester.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
4.5:1 for normal text and 3:1 for large text and UI components.
What is the WCAG AAA contrast ratio?
7:1 for normal text and 4.5:1 for large text.
What counts as large text?
At least 24 px regular or about 18.7 px bold (18 pt or 14 pt bold).
Which grey passes on a white background?
#767676 is the lightest grey that reaches 4.5:1 on white.
How does the colour suggestion work?
It keeps your hue and saturation and adjusts the lightness until the ratio reaches 4.5:1.
Last updated: