Color Contrast Checker
Pick a text color and a background color to see the WCAG contrast ratio, an AA/AAA pass-or-fail breakdown, and a live preview — no signup.
3.03:1
Good contrast
Live Preview
Large text, 24px bold
Normal text, 16px regular — this is roughly how a paragraph of body copy reads at this exact foreground and background combination.
Understanding the WCAG Thresholds
The contrast ratio is a single number from 1:1 (identical colors, unreadable) to 21:1 (pure black on pure white, maximum contrast), computed from each color's relative luminance. WCAG 2.1 sets five thresholds this tool checks against: 4.5:1 for AA normal text, 7:1 for AAA normal text, 3:1 for AA large text, 4.5:1 for AAA large text, and 3:1 for AA graphics and UI components (borders, icons, focus rings).
These aren't arbitrary — they're calibrated to the point where most people with low vision or color vision deficiencies can still distinguish text from its background. A ratio just under the threshold isn't "almost fine"; it's a real readability gap for a meaningful share of users.
Why Contrast Matters Beyond Compliance
Low contrast doesn't just fail an accessibility audit — it slows every reader down, not only people with diagnosed vision impairments. Bright sunlight on a phone screen, a cheap monitor with washed-out colors, or simply being tired all reduce a reader's effective contrast sensitivity. Text that passes AA comfortably degrades gracefully in those conditions; text that barely passes (or fails) becomes unreadable the moment viewing conditions aren't ideal.
It's also a legal exposure point in many jurisdictions — the ADA in the US and EN 301 549 in the EU both reference WCAG 2.1 AA as the practical accessibility bar for digital products, and contrast failures are among the most commonly cited issues in accessibility complaints because they're this easy to test for.
Fixing a Failing Combination
The fastest fix is usually adjusting lightness, not hue — darkening the text or lightening the background (or both) raises the ratio without changing the color's identity as much as swapping to a different hue would. Check the tints and shades of your current color first — a darker shade of the same brand color often clears AA without needing a different color entirely.
If the pairing is for a large heading or a UI accent rather than body copy, remember the large-text and UI-component thresholds are more forgiving (3:1) than normal text (4.5:1) — a combination that fails for a paragraph may already pass for a headline at the same colors.
Frequently Asked Questions
What is a good contrast ratio?
WCAG 2.1 requires at least 4.5:1 for normal text to meet the AA standard (the baseline most accessibility audits check for), and 7:1 for the stricter AAA standard. Large text (18pt+, or 14pt+ bold) only needs 3:1 for AA and 4.5:1 for AAA, since bigger text is easier to read at lower contrast.
Do I need AA or AAA compliance?
AA is the standard most legal accessibility requirements (like the ADA and EN 301 549) reference, and is the practical target for most websites. AAA is a stricter, enhanced standard — worth aiming for on critical content like body text in a reading-heavy product, but not always achievable without redesigning a brand's color palette.
Why does large text need a lower contrast ratio?
Larger characters have more surface area and clearer edges, so the eye can distinguish them from the background more easily even with less color difference. WCAG defines large text as 18 point (24px) or larger, or 14 point (18.66px) and bold.
What counts as a UI component for the 3:1 requirement?
WCAG 2.1's 1.4.11 criterion covers non-text elements that convey information — button borders, form input outlines, icons, focus indicators, and similar interface elements — which need at least 3:1 contrast against their adjacent background so users with low vision can perceive them.