Contrast Checker
Check colour contrast against WCAG accessibility levels.
Runs entirely in your browser. Nothing is sent to a server.
Save this tool
Keep Contrast Checker handy
Use your browser's Share menu, then “Add to Home Screen”.
Large text sample
Normal body text sample — the size most of your content actually uses.
About this tool
Contrast ratio measures how distinguishable text is from what sits behind it, on a scale from 1 to 21. The Web Content Accessibility Guidelines set the bar at 4.5 to 1 for normal body text at level AA, dropping to 3 to 1 for large text, and rising to 7 to 1 for the stricter AAA level. Those numbers are not arbitrary preferences: low contrast is one of the most common accessibility failures on the web, and it affects far more people than it might seem, including anyone with reduced vision, anyone over about forty, and anyone reading a screen in bright sunlight. This checker calculates the ratio properly, linearising the sRGB values first, which is the step naive calculators skip and the reason their results disagree with real accessibility audits. It handles translucent text by compositing it over the background first, since a colour with alpha has no single true contrast value on its own. When a pair falls short, it suggests the nearest shade of your text colour that passes.
How to use it
- Enter your text colour and background colour
- Read the ratio and which WCAG levels it passes
- If it fails, use the suggested colour that passes
Frequently asked questions
What counts as large text?
18pt, which is 24px, or 14pt bold, which is about 18.66px. Anything at or above that only needs a 3 to 1 ratio at level AA instead of 4.5 to 1. Applying the large-text threshold to normal body copy is one of the most common ways an audit fails after everyone thought it passed.
Should I aim for AA or AAA?
AA is the practical standard and is what most legislation references, including the European Accessibility Act. AAA is stricter and is difficult to hit across a whole design system, so it is usually treated as an aspiration for body text rather than a blanket requirement.
Why does your ratio differ from a calculator I used elsewhere?
Almost always because the other one averages the raw RGB values instead of linearising them first. sRGB is gamma-encoded, so the WCAG formula applies a specific transform per channel before weighting them. Skipping it produces numbers that look plausible but fail real audits.
How is transparent text handled?
It is composited over the background colour first, then measured. A colour with an alpha channel has no meaningful contrast ratio by itself, because what you actually see is a blend. Tools that ignore alpha report a pass for text that is invisible in practice.
Does contrast matter for icons and borders too?
Yes. WCAG 2.1 requires 3 to 1 for user interface components and meaningful graphics, which covers form field borders, focus indicators and icon buttons. Those are checked here alongside the text levels.