WCAG contrast checker
Test the accessibility of your text/background colors.
- Instant
- Free
- Private (processed locally)
- No sign-up
Colors everyone can read, checked in two clicks
Nearly one in twelve people perceives some contrasts poorly. The WCAG (Web Content Accessibility Guidelines) set minimum ratios between text and background; this checker computes them live, using the official relative-luminance formula, and shows a real preview of your combination.
-
Pick your two colors
With the picker or by pasting a hex code (#rrggbb or #rgb).
-
Read the ratio
From 1:1 to 21:1, with the four AA/AAA verdicts for normal and large text.
-
Adjust if needed
Tweak the lightness of one color until it passes, guided by the preview.
WCAG thresholds at a glance
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
| UI components (2.1) | 3 : 1 | 3 : 1 |
Contrast must be checked for every text/background pair in your interface — remember states: hovered links, disabled buttons, placeholders and dark mode.
Frequently asked questions
What is the contrast ratio?
It is the ratio between the luminance of the lighter color and the darker one, from 1:1 (identical) to 21:1 (black on white). WCAG uses it to guarantee text readability for everyone, including people with low vision.
Which thresholds should I reach?
Level AA: 4.5:1 for normal text, 3:1 for large text. Level AAA, stricter: 7:1 and 4.5:1 respectively. AA is the legal minimum in many countries for public services.
What counts as “large text”?
Per WCAG: at least 18pt (24px) in regular weight, or 14pt (18.5px) in bold. Big headings therefore tolerate lower contrast than body text.
Does contrast also apply to non-text elements?
Yes: since WCAG 2.1, interface components (input borders, informative icons, focus states) must reach 3:1 against adjacent colors (criterion 1.4.11).
My ratio is too low: how do I fix it?
Darken the text or lighten the background (or the reverse in dark themes). A few lightness steps are often enough — keep the same hue and adjust lightness to preserve your palette.