Accessibility · WCAG-style math
WCAG contrast checker
Drop in two sRGB colors — text and background — and read off contrast for normal vs large type at AA and AAA. The preview block exists because ratios alone do not tell you if a font weight still reads on a busy gradient hero (spoiler: it often does not).
Large sample heading
Body text sample for contrast preview.
Contrast ratio
0 : 1
| Check | Result |
|---|---|
| AA — normal text | |
| AA — large text (18pt+ / 14pt+ bold) | |
| AAA — normal text | |
| AAA — large text |
Why this checker exists
Automated audits catch missing alt text; they rarely catch “we shipped a beautiful gray that fails
4.5:1 on the tinted card behind it.” This page is a fast pair check for opaque sRGB text and
background colors with WCAG-style thresholds — before the argument moves to production.
How to use it
- Pick text (foreground) and background colors with the two color inputs — the live preview updates instantly.
- Read the numeric ratio, then scan the AA / AAA rows for normal vs large text.
- Toggle site light/dark theme and re-check if your component ships in both modes.
- When colors shift during design review, paste the new pair here before merge — contrast regressions are silent until support mail arrives.
Use a formal audit when…
Procurement or law requires a signed VPAT or full WCAG report. This tool is a desk check, not a certificate.
Practical workflow
- Start with the worst pair on the page (muted caption on tinted card) — that is where teams ship debt.
- Large-text thresholds map to CSS-ish point sizes — use the table rows instead of guessing from Figma font names.
- If you tweak a brand color, re-run before merge.
FAQ
Why does this checker only support opaque colors?
Alpha blending depends on what sits behind the layer. For translucent UI, flatten mentally or inspect computed styles in the browser — this page intentionally avoids guessing your stacking context.
What counts as large text?
WCAG uses 18pt+ regular or 14pt+ bold as “large” — roughly 24px / ~18.67px CSS at default scaling, but device settings can shift that. When in doubt, treat marketing headlines as large and body copy as normal.
Does this support non-sRGB displays?
The math here follows the classic sRGB relative luminance path used by mainstream WCAG checkers. Wide-gamut P3 CSS colors deserve extra caution — browsers map differently. For critical brand work, verify on target hardware.
Why does my ratio jump when I change only one channel slightly?
Luminance is non-linear; mid-gray moves fast. That is why two “almost identical” grays can flip pass/fail — not a bug in the tool.
What about non-text UI?
Icons and charts have different guidance. Contrast ratios help text-on-background; for icon-only buttons also test shape recognition and add text labels where you can.