Contrast Checker (WCAG AA & AAA)
Check the contrast ratio between any text and background colour, with WCAG AA and AAA verdicts for normal text, large text and interface components — plus the nearest accessible colour when a pair fails.
Contrast Checker
Check the WCAG contrast ratio between text and background colors, with AA and AAA verdicts.
Edit the sample to see your own copy at both sizes.
Normal text · 16pxAccessible text on this background
Large text · 24px boldAccessible text on this background
Contrast ratio
14.68:1
Passes AAA for normal text.
- AA · normal textneeds 4.50:1Pass
- AAA · normal textneeds 7.00:1Pass
- AA · large text (18pt+ / 14pt bold)needs 3.00:1Pass
- AAA · large textneeds 4.50:1Pass
- UI components & graphics (SC 1.4.11)needs 3.00:1Pass
How to use
The whole flow runs in your browser — nothing is uploaded.
- Set both coloursType a HEX, rgb() or hsl() value, or use the colour pickers — the words in the preview update instantly.
- Read the verdictsNormal text, large text and UI components each get their own pass/fail row with the ratio they need.
- Test your own copyReplace the preview text with your own words to see them at both sizes.
- Fix a failing pairUse the suggested nearest accessible colour, or copy the report for a review.
- Every step runs locally in your browser.
Key Features
Check WCAG contrast ratios between any text and background colour. Everything runs client-side on your own device.
- Real WCAG mathsRatios use the WCAG 2.1 relative-luminance formula — 1:1 to 21:1, exactly as accessibility checkers compute them.
- Every level at onceAA and AAA for normal and large text, plus the 3:1 non-text contrast requirement.
- Nearest accessible colourWhen a pair fails, the tool finds the closest colour that reaches AA and offers it in one click.
- Copy-ready reportCopy the ratio or a full pass/fail summary for a pull request or design review.
Frequently asked questions
WCAG 2.1 asks for 4.5:1 for normal text (AA), 3:1 for large text at 18pt or 14pt bold (AA), and 3:1 for interface components and graphical objects (SC 1.4.11). AAA raises those to 7:1 and 4.5:1.
Text at 18pt (24px) or larger, or 14pt (about 18.66px) and bold. The checker shows both sizes together so you can see which level applies.
Ratios only differ when the colours differ. Values are parsed to the same sRGB triple the WCAG formula expects, so a HEX picked here and in a design tool produce the same number.
Yes — that is why alpha is ignored rather than guessed: a semi-transparent colour's real contrast depends on whatever is behind it. Pick the flattened colour you actually render for an accurate check.