Contrast Checker
WCAG 2.x contrast calculation with AA / AAA pass-fail, both directions at once — stop guessing at accessible color pairs.
>_ USAGE GUIDE
Enter a foreground and a background color and the tool computes the WCAG 2.x contrast ratio with AA / AAA pass-fail verdicts — both directions shown together, because white text on black and black text on white do not carry the same visual weight. Adjust either color and the results recompute in real time until the pair passes.
- Set both colors: text color and background color
- Read the ratio: a single number plus the AA and AAA verdicts for text-size scenarios
- Tune until it passes: every change recomputes instantly
This is the de facto standard for accessible color choices: body text needs a ratio of at least 4.5:1 for AA and 7:1 for AAA, with large text (18pt+ or 14pt bold) relaxed to 3:1. Design reviews, product acceptance, and overseas compliance regimes (ADA, EN 301 549) all reference these numbers — no more guessing at the review meeting. Computation is local and instant.
>_ FAQ
Q1 · What contrast ratio counts as passing?
WCAG thresholds: normal text needs at least 4.5:1 (AA) and 7:1 for AAA; large text (at least 18pt regular or 14pt bold) passes AA at 3:1. UI components and graphical objects — button borders, input outlines — carry their own 3:1 requirement. This tool shows the ratio and the verdict for the text scenarios together.
Q2 · What is APCA, and how should I read the Lc value on this page?
The tool shows both standards side by side: the WCAG 2.x ratio (the formal acceptance standard) and the APCA Lc value — the new algorithm adopted by the WCAG 3 draft, which is still a W3C draft. APCA tracks perceived readability more closely and handles light-text-on-dark cases better; Lc≥75 roughly matches body-text AA and Lc≥90 is the preferred body-text tier. Formal acceptance remains WCAG 2.x — treat Lc as design guidance. APCA polarity is asymmetric (which color plays "text" matters), so the tool reports both directions.
Q3 · Why is light gray text on a white background marked as failing?
Light gray on white typically measures only 2–3:1, well under the 4.5:1 baseline — nearly unreadable for users with low vision, in bright environments, or on low-end screens. This is an information-access problem, not a style preference. Deepening the text to about #767676 (roughly 4.54:1) clears AA while still looking light and airy.
Q4 · Should I check both directions — white-on-black and black-on-white?
Yes. The ratio is mathematically symmetric for the same pair, but the visual experience is not: light text on a light background disappears more readily than dark text on a dark background, thanks to halation. Dark-mode designs especially need checking in both directions — do not carry over intuitions from the light theme.
Q5 · Our brand color fails the ratio — do we have to abandon it?
No need for that. Standard resolutions: use the brand color for decoration and large surfaces while body text adopts a darker variant derived from it; when text sits on a brand-colored background, switch to a dark text color; or adjust the background's lightness with a translucent black/white overlay and re-verify. The principle: brand color handles identity, compliant color handles reading — the two roles do not have to share one value.