WCAG AA & AAA accessibility contrast ratio for any two colors
The WCAG (Web Content Accessibility Guidelines) contrast ratio measures how easily text can be read against its background. A ratio of 4.5:1 is required for Level AA compliance with normal text — the minimum standard for most websites and a legal requirement under the EU European Accessibility Act (EAA). 7:1 achieves Level AAA — the highest standard, required for large-scale public services.
The contrast ratio is calculated from the relative luminance of both colors — a perceptual measure of brightness. Pure white (#ffffff) against pure black (#000000) gives a ratio of 21:1, the maximum. A light grey (#aaaaaa) against white (#ffffff) gives approximately 2:1 — far below the minimum. Most automatic colour pickers and brand guidelines get this wrong, which is why this tool exists.
How to use: Enter your foreground color (text) and background color below. The checker shows the contrast ratio and whether it passes AA and AAA for normal text, large text (18pt+ or 14pt bold), and UI components. Swap the colors with the ⇄ button. Share your result via the URL — it updates automatically.
Body text at normal size. This is how your text will look with the selected color combination. Readable or not?
Small text (12px) — hardest to read