How to check color contrast
- Enter your text color and background color as HEX codes, or use the color pickers.
- Read the contrast ratio and the pass/fail results for each WCAG level.
- If the pair fails, click the suggested color — the closest shade of your text color that passes AA.
What is the contrast ratio?
The Web Content Accessibility Guidelines (WCAG) measure how different two colors look to the human eye by comparing their relative luminance. The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). Higher is easier to read.
| Level | Normal text | Large text | Who needs it |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | The legal and industry standard for most websites and apps |
| AAA | 7:1 | 4.5:1 | Enhanced — government, health, education and older audiences |
“Large text” means at least 18 point (24 px) regular, or 14 point (about 18.7 px) bold. User-interface parts such as input borders, icons and focus rings need at least 3:1 against their surroundings.
Why contrast matters
Hundreds of millions of people have low vision or color vision deficiency, and everyone struggles with low-contrast text on a phone in sunlight. Good contrast improves readability, reduces bounce rates and is required by accessibility laws and standards such as the ADA in the US, the European Accessibility Act and Section 508. Google Lighthouse also flags low-contrast text in its accessibility score.
Common mistakes
- Light gray text on white (#999 on #FFF is only 2.8:1).
- White text on bright brand colors such as yellow, orange or light green.
- Placeholder text in form fields that is too faint.
- Text over photos without a dark overlay.
Building a color scheme? Start with the color palette generator, then test each text/background pair here.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1.
Does WCAG 2.2 change the contrast rules?
No. WCAG 2.2 keeps the same contrast requirements as WCAG 2.0 and 2.1.
Is gray text on white accessible?
Only if it is dark enough. #767676 on white is the lightest gray that passes AA (4.54:1).
Does contrast apply to logos?
No. Logos and brand names are exempt, but text and essential icons are not.