// free · runs in your browser · nothing uploaded
Colour Contrast Table: White and Black Text on 8 Common Colours (WCAG 2.2)
The contrast ratio and WCAG grade for white and for black text on eight common brand colours, worked out with the WCAG formula.
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
White or black text?
WCAG 2.2 needs a contrast ratio of at least 4.5:1 for normal text (AA), 3:1 for large text and UI parts, and 7:1 for AAA. Many mid-tone colours fail with white text, even though they look fine on a bright screen.
| Background | White text | Black text |
|---|---|---|
| Blue #2563EB | 5.16 AA | 4.06 AA large only |
| Red #DC2626 | 4.82 AA | 4.34 AA large only |
| Green #16A34A | 3.29 AA large only | 6.37 AA |
| Orange #F97316 | 2.80 Fail | 7.49 AAA |
| Purple #7C3AED | 5.69 AA | 3.68 AA large only |
| Grey #6B7280 | 4.83 AA | 4.34 AA large only |
| Teal #0D9488 | 3.74 AA large only | 5.60 AA |
| Yellow #EAB308 | 1.91 Fail | 10.95 AAA |
Related tools
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.