How to use the Contrast Checker (WCAG)
- Enter the text and background colors.
- Read the contrast ratio and pass/fail results.
- If it fails, apply the suggested accessible color.
What does this tool do?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast so people with low vision or color-vision deficiencies — and anyone on a phone in bright sunlight — can read text. The ratio runs from 1:1 (no contrast) to 21:1 (black on white).
Level AA, the common legal and industry target, requires 4.5:1 for normal text and 3:1 for large text and interface components.
Why use it?
- Meet accessibility requirements.
- Make text readable for everyone.
- Fix failing colors with one click.
Examples
Common color pairs:
| Text on white | Ratio | AA normal text |
|---|---|---|
| #000000 black | 21 : 1 | Pass |
| #5b616b gray | 6.2 : 1 | Pass |
| #767676 gray | 4.54 : 1 | Pass (just) |
| #999999 light gray | 2.85 : 1 | Fail |
| #2c48d6 blue | 6.99 : 1 | Pass |
The formula
Ratio = (L1 + 0.05) ÷ (L2 + 0.05)
L = relative luminance of the lighter (L1) and darker (L2) color
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Last reviewed by the M2Toolkit team.