WCAG Contrast Checker
Check color contrast against AA and AAA standards — in your browser.
About Contrast Checker
A WCAG contrast checker measures the ratio between a text color and its background and tells you which accessibility levels it passes. Enter two colors to see the contrast ratio and pass/fail for AA and AAA at normal and large text sizes — essential for accessible, readable design.
What the ratio means
Contrast ratio compares the relative luminance of two colours and runs from 1:1, two identical colours, to 21:1, pure black on pure white. Luminance is not simple brightness — each colour channel is gamma-corrected and then weighted, with green contributing far more than red and red more than blue, because human vision is most sensitive to green.
That weighting produces results people find counterintuitive. Pure yellow on white is a poor 1.07:1 and effectively unreadable, while pure blue on white is 8.6:1 and perfectly legible, despite blue looking darker and more saturated to most eyes. This is exactly why the ratio is worth measuring rather than judging by eye.
The thresholds, and what counts as large
WCAG 2 sets two levels. AA, the level most legislation and procurement rules reference, requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1. Non-text elements that convey meaning — icons, form-field borders, focus indicators, chart segments — need 3:1 against what surrounds them.
Large text has a specific definition: at least 18pt, or 14pt if bold, which works out to roughly 24px and 18.66px respectively. It gets an easier threshold because thicker strokes cover more pixels and stay legible at lower contrast. Note that this is about rendered size, so a heading that shrinks on mobile may cross back into the normal-text requirement.
Where designs usually fail
Placeholder text and disabled controls are the most common offenders, because designers deliberately mute them and then push the grey too far. Light grey on white — the standard secondary-text colour in a lot of interfaces — frequently lands around 3:1, which fails AA for body copy. Disabled elements are formally exempt from the requirement, but greying out something users still need to read is a poor trade.
Text over photographs is the other classic failure, because the contrast changes across the image. A caption legible over the dark part of a hero image can vanish over a bright patch. The reliable fixes are a solid or gradient scrim behind the text, or a text shadow — not simply hoping the crop stays dark.
Passing the check is not the same as being readable
The ratio is a floor, not a target. A hairline weight at 4.5:1 technically passes and still strains most readers; the algorithm knows nothing about stroke thickness, letter spacing, or font size beyond the large-text cut-off. Meeting AA and then testing at arm's length on a phone in daylight catches problems the number never will.
It also cannot tell you whether colour alone is carrying meaning. A red error message that passes contrast is still invisible as an error to someone who cannot distinguish it from the surrounding text — that needs an icon or wording as well. Contrast is one requirement among several, and the easiest one to measure, which is why it gets mistaken for the whole job.
Frequently asked questions
- What contrast ratio do I need for WCAG AA?
- WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively.
- What counts as 'large text'?
- Roughly 18pt (24px) normal weight, or 14pt (18.66px) bold. Large text has a lower contrast requirement.
- How do I know if my text passes AA or AAA?
- Enter your text and background colors — the checker shows the contrast ratio and a pass/fail badge for AA and AAA at both normal and large text sizes.
- How is the contrast ratio calculated?
- From the relative luminance of both colors using the WCAG 2.x formula, giving a ratio between 1:1 and 21:1.