Color Contrast Checker (WCAG)
Test any two colours against WCAG. Pick a text colour and a background colour and see the contrast ratio and the AA and AAA results live.
Contrast ratio: 21.00:1
- AA normal text (4.5:1): Pass
- AA large text (3:1): Pass
- AAA normal text (7:1): Pass
- AAA large text (4.5:1): Pass
Privacy: everything runs in your browser. Nothing you type is sent or stored anywhere.
How to use this color contrast checker
Text that is hard to read is text that does not get read. If the words on your page sit too close in colour to the background behind them, many visitors will struggle to read them, and some will leave. This free color contrast checker tests any two colours against the WCAG rules and tells you the contrast ratio, and whether the pair passes AA or AAA for normal and large text. Pick a foreground and a background colour below and the result updates as you type.
- Choose a foreground colour — the colour of your text — with the colour picker, or type a 6-digit hex code such as #0274be into the hex field.
- Choose a background colour the same way. The checker works out the contrast ratio live, every time you change either colour.
- Read the result: the ratio, the AA and AAA pass or fail for normal and large text, and the live preview showing your colours as real text. Use the Swap button to flip the two colours round.
Worked example
Here is the strongest pair there is: black text on a white background. Set the foreground to #000000 and the background to #FFFFFF. The checker works out a contrast ratio of 21.00:1 — the highest a pair of colours can score. That clears every bar: AA normal text (4.5:1) passes, AA large text (3:1) passes, AAA normal text (7:1) passes, and AAA large text (4.5:1) passes. The preview block shows the black sample text on white, exactly as a visitor would see it. Try a weaker pair next: #777777 on #FFFFFF scores 4.48:1, which fails AA for normal text but still passes AA for large text — a useful reminder that bigger, bolder text can pass where small text cannot.
A second example shows a near miss. Set the foreground to #0274be, a medium blue, on the same white background. The ratio is 4.95:1. That passes AA for normal text, because 4.95 is above 4.5, but it fails AAA for normal text, because 4.95 is below 7. It passes AAA for large text, though, since the AAA large-text bar is 4.5:1. The same colour can pass one level and fail another, which is why the checker shows all four results side by side.
What is a good contrast ratio?
For normal text, aim for a contrast ratio of at least 4.5:1 — that is the WCAG AA bar, and it is the level most websites should reach. For large text (18pt and above, or 14pt bold and above), the AA bar is lower, at 3:1, because bigger letters are easier to pick out. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text. A ratio of 21:1, like black on white, is the maximum possible. Anything below 3:1 will be hard to read for many people, so treat 4.5:1 as your everyday target and 7:1 as the goal when you can reach it.
Where to use it
Check the colours you actually use: body text on your page background, headings, links, and buttons. Links need to stand out from the text around them as well as from the background, so check the link colour too. Buttons matter most of all — white text on a pale button is a common failure. If a pair fails, darken the text or lighten the background a little and check again; small changes often push a 4.2:1 pair over the 4.5:1 line.
Frequently asked questions
What is a good contrast ratio?
For normal text, 4.5:1 or higher is good — that is the WCAG AA standard. Large text needs 3:1 or higher. For the stricter AAA level, aim for 7:1 for normal text and 4.5:1 for large text. The higher the number, the easier the text is to read.
What is WCAG AA vs AAA?
WCAG is the Web Content Accessibility Guidelines, the standard most of the web follows for accessible design. AA is the level most sites are expected to reach: 4.5:1 for normal text and 3:1 for large text. AAA is the stricter level: 7:1 for normal text and 4.5:1 for large text. This color contrast checker tests your colours against both levels.
What counts as large text?
Large text means 18pt and above, or 14pt bold and above. Anything smaller counts as normal text, and it has to meet the tougher 4.5:1 bar at AA level. Headings are often large text, while body copy is usually normal text.
Why does contrast matter?
Low contrast is hard to read for many people, including anyone with low vision, and it is harder still in bright sunlight or on a cheap screen. Good contrast helps everyone read faster and with less strain, and it keeps your site usable for visitors who rely on clear text.
Does this check images?
No — this checker tests text colours only. It compares a foreground colour and a background colour and reports the WCAG contrast ratio. It cannot measure the contrast inside a picture or a photograph.