Contrast Checker
Test any foreground and background pair against WCAG 2.2 AA, AAA and APCA. When a combination fails, we suggest accessible alternatives and explain exactly why.
What contrast ratio is accessible?
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| WCAG AA | 4.5:1 | 3:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 | — |
How contrast ratio is calculated
WCAG uses relative luminance — the perceived brightness of a color after linearizing the sRGB channel values. The formula is:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05)R, G and B are the linearized channel values. This is why the calculation is not just an RGB average — green contributes far more to perceived brightness than blue.
What is APCA?
APCA (Advanced Perceptual Contrast Algorithm) is a candidate replacement for WCAG 2.x contrast. It produces a signed Lc value between roughly −108 and 106 — larger absolute values mean stronger contrast. Unlike WCAG, APCA accounts for font weight and polarity (dark-on-light vs light-on-dark). It is not yet a formal standard, but it is increasingly used in design systems that want more nuance than a single ratio.
Practical advice
- Aim for at least 4.5:1 for any body copy, and 7:1 for interfaces that will be used in bright environments or on low-quality screens.
- Never use color alone to convey meaning. Pair color with icons, text labels or patterns.
- Check disabled states, placeholder text and focus rings — they are frequently forgotten.
- On gradients and photos, test the lightest and darkest part of the background separately.
Frequently asked questions
What is a good contrast ratio?
For most interfaces, 4.5:1 is the minimum for body text (WCAG AA). For emphasis, aim for 7:1 (AAA). Very thin typefaces or small sizes benefit from even higher contrast.
Does dark mode need different contrast?
WCAG does not require different ratios for dark mode, but very high contrast in dark mode (for example pure white on pure black) can cause halation for some users. APCA and modern design guidance suggest slightly lower lightness for text on dark backgrounds.
What is the difference between AA and AAA?
AA is the baseline legal accessibility requirement in most jurisdictions. AAA is stricter and is recommended for content that will be read extensively, such as documentation or long-form articles.
Is a 3:1 ratio ever enough?
Yes, for two cases: large text (18pt+ or 14pt bold) and non-text UI components such as icons, borders, charts and graphical elements.