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 |
Common mistakes
- Checking only body text. Placeholder text, disabled-looking labels, icons and focus outlines need contrast too (3:1 for UI components).
- Relying on brand colours that “look fine” on a bright monitor. #777777 on white looks readable but is 4.48:1 — just below AA for normal text.
- White text on saturated buttons: white on pure red #ff0000 is only 4.00:1.
The formula
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.
Frequently asked questions
What contrast ratio do I need?
For WCAG AA: 4.5:1 for normal text, 3:1 for large text (at least 24px, or 18.66px bold) and 3:1 for icons, borders and other UI components. AAA asks for 7:1 and 4.5:1.
Is #777777 on white accessible?
Not for normal text: it's 4.48:1, just under the 4.5:1 AA minimum. #767676 is the lightest grey that passes on white (4.54:1), and #595959 reaches AAA (7:1).
Does WCAG 2.2 change the contrast rules?
No. WCAG 2.2 kept the same contrast requirements as 2.1 (success criteria 1.4.3, 1.4.6 and 1.4.11).
Last reviewed by the M2Toolkit team.