Enter a text colour and a background colour to get their contrast ratio and whether they pass WCAG AA (4.5:1 for normal text, 3:1 for large text and UI components) and AAA (7:1). If they fail, the checker suggests the closest text colour that passes AA on the same background.
What the levels mean
| Check | Ratio | Applies to |
|---|---|---|
| AA normal text | 4.5:1 | Body text, labels, most UI text |
| AA large text | 3:1 | Text 24px+ or 18.66px+ bold |
| AAA normal text | 7:1 | Enhanced readability |
| UI components | 3:1 | Button borders, icons, input outlines, focus rings |
The ratio is calculated with the WCAG 2 relative-luminance formula and rounded down, so a reported 4.50 really passes.
Why contrast matters more in apps
Screen brightness drops to save battery, glare washes out light greys, and many users enlarge text. Light-grey placeholder text and pale brand colours on white are the usual failures. Build matched palettes with the dark mode CSS generator.
Frequently asked questions
What contrast ratio do I need for buttons?
Button text needs 4.5:1 against the button colour; the button's edge or fill needs 3:1 against the page background.
Is the result the same in dark mode?
Contrast depends only on the two colours. Check your dark palette's pairs separately.