What does it do?
It checks the contrast ratio between a text color and its background following WCAG 2.2, and tells you which levels pass: AA and AAA for normal and large text, and 3:1 for UI components such as icons and input borders.
When a level fails, it suggests the closest color that passes, with a button to apply it, so you fix accessibility without redesigning.
Minimum ratios
| Content | AA | AAA |
|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Icons, borders of controls | 3:1 | — |
Frequently asked questions
›What is the difference between AA and AAA?
AA is the level most laws and policies require: 4.5:1 for normal text and 3:1 for large text. AAA is stricter (7:1 and 4.5:1) and recommended for long reading or for users with low vision.
›What counts as large text?
Text of at least 24px (18pt), or at least 18.66px (14pt) in bold. Headings usually qualify; body text does not.
›How is the suggested color chosen?
It keeps the hue and chroma of your text color and only changes its lightness in OKLCH, darker or lighter, by the smallest amount that reaches the level. So the color still looks like your brand.