Contrast checker
WCAG 2.2 AA/AAA ratios with an automatic fix suggestion. Free, no sign-up, works on phones.
The quick brown fox
Large text sample — 24px bold
Normal body text at 17px. Readable text helps everyone, including people with low vision and anyone using a phone outdoors.
Small print at 15px.
How to use the contrast checker
What ratio do I need?
4.5:1 for normal text (AA), 7:1 for AAA, and 3:1 for large text and interface components such as icons and focus rings.
How is the fix suggestion found?
We keep the hue and saturation of your text color and step its lightness until the pair reaches 4.5:1.
More: Color converter · Palette generator · Gradient generator · Image color picker · Color blindness simulator · Shades & tints generator · Random color
Need a full color system?
We design accessible brand palettes, UI tokens and style guides at a fixed price.