Contrast Checker
Check whether your text colour is readable on its background according to WCAG accessibility guidelines — and get a nearby colour that passes if it doesn’t.
Result
Choose a text colour and a background colour.
How to use this tool
- Enter the text colour and the background colour (any format), or use the pickers.
- The preview shows large and normal text, and the table shows each WCAG requirement.
- If normal text fails AA, a suggested text colour with the same hue that passes is shown.
How it works
contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker one. Luminance converts each sRGB channel to linear light and weights it: L = 0.2126 R + 0.7152 G + 0.0722 B.
WCAG 2.2 minimums: 4.5:1 for normal text (AA), 3:1 for large text and UI components (AA), 7:1 for normal text (AAA) and 4.5:1 for large text (AAA).
Example
Grey on white
#777777 on white is 4.48:1 — just short of AA for normal text. The suggested #757575 reaches 4.6:1 and passes. #767676 is the lightest grey that passes on white (4.54:1).
The maximum
Black on white is 21:1, the highest possible ratio.
Privacy and limitations
- The check follows the WCAG 2.2 formula used by accessibility audits.
- Ratios are truncated rather than rounded up, so a result just under a threshold is never reported as a pass.
- Transparent colours are blended (background over white) before measuring.
- Contrast is one part of accessibility; font size, weight and spacing also matter.
Frequently asked questions
What counts as large text?
At least 24px (18pt) regular, or 18.66px (14pt) bold.
Is AA or AAA required?
Most accessibility laws and policies reference WCAG Level AA. AAA is a stricter level recommended where possible.