Color Contrast Checker
WCAG 2.1 contrast ratio for foreground and background colors. AA / AAA pass/fail for normal and large text.
Runs 100% client-sideOn this page4 sections
Foreground (text)
Background
Large text — qa.codes
Normal body text — The quick brown fox jumps over the lazy dog.
Small text — 1234567890 the lazy dog jumps back.
Contrast ratio
3.76:1
Marginal
| Level | Normal text | Large text |
|---|---|---|
| AA | ✗ Fail≥ 4.5:1 | ✓ Pass≥ 3:1 |
| AAA | ✗ Fail≥ 7:1 | ✗ Fail≥ 4.5:1 |
Large text = 18pt (24px) or 14pt (18.66px) bold and larger. AA requires ≥ 4.5:1 normal / ≥ 3:1 large; AAA requires ≥ 7:1 normal / ≥ 4.5:1 large.
HOW TO USE
- 01Pick foreground and background using the color picker or paste a hex value (3 or 6 chars, with or without #).
- 02The preview block shows live text in the chosen palette so you can sanity-check by eye.
- 03Use Swap to flip foreground and background — useful when checking inverted states like buttons.
WHEN TO USE
Use this when verifying that a foreground/background color combination meets WCAG accessibility contrast requirements — during UI component development, design review, or accessibility audits. WCAG 2.1 requires at least 4.5:1 contrast for normal text (AA) and 3:1 for large text and UI components. Use it to check proposed palettes before committing them to a design system, and to diagnose which specific combination is failing when an accessibility scanner flags a violation.
WHAT BUGS THIS FINDS
Insufficient contrast for normal text
A colour pair that passes the 3:1 large-text threshold fails the 4.5:1 normal-text requirement — the checker shows both thresholds simultaneously so you can see which text sizes are compliant.
Hover/focus state contrast unchecked
An interactive element's default state meets requirements but its hover or focus state (darker background, lighter text) does not — Swap and re-check the hover palette to confirm the state change doesn't introduce a violation.
Disabled state compliance not confirmed
A greyed-out disabled button has a contrast ratio below 3:1 — while WCAG 1.4.3 exempts disabled components, confirming the ratio ensures the exemption is intentional and documented rather than accidental.
Brand colour update breaks compliance
A design system colour token is updated without re-checking all usages — check the new token against every background it appears on to confirm no existing combination drops below the required threshold.
QA USE CASES
Design system token validation
Check every foreground/background combination in a component library's color tokens against WCAG AA thresholds before merging a design system update.
Accessibility audit finding reproduction
Enter the hex values flagged by an automated scanner (axe, Lighthouse) to confirm the contrast ratio matches the reported violation and identify which text size threshold is failing.
Dark mode contrast parity
Check that light-mode and dark-mode palettes both meet WCAG AA requirements — dark modes introduced without contrast review often introduce violations on secondary text or placeholder colours.