WCAG requirements
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
Large text means at least 24 px, or 18.66 px when bold. UI components include input borders, icons and focus indicators.
How to fix low contrast
When a combination fails AA, the checker suggests the closest version of your text colour (same hue and saturation, adjusted lightness) that reaches 4.5:1, so you keep your brand feel while becoming accessible.
Good contrast helps everyone — people with low vision, older users and anyone reading on a phone in sunlight. It is also checked in Lighthouse accessibility audits; run one with the Website Speed Test.
Frequently asked questions
Is light grey text on white accessible?
Usually not: #aaaaaa on white is only 2.3:1. #767676 is the lightest grey that passes AA (4.54:1).
Which colour formats can I enter?
Any CSS colour: HEX, rgb(), hsl() or names.
Is WCAG contrast a legal requirement?
Many accessibility laws (such as the European Accessibility Act and ADA cases in the US) reference WCAG AA.