WCAG Contrast Checker
Check whether a text/background color pair passes WCAG AA and AAA contrast thresholds. Enter a text color and a background color, or pick Pantone codes from the dropdowns. The tool computes the contrast ratio from relative luminance, shows per-size verdicts (normal and large text), previews real text at each size, and suggests accessible Pantone alternatives when a pair fails.
What is a WCAG contrast checker?
A contrast checker computes the WCAG contrast ratio between a text color and a background color and reports whether the pair passes AA or AAA thresholds. WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is a weighted sum of linearized sRGB channels with weights reflecting human eye sensitivity: 0.2126 red, 0.7152 green, 0.0722 blue. The result is a number between 1:1 (identical colors, unreadable) and 21:1 (pure black on white, maximally readable).
AA and AAA are two conformance levels defined by the WCAG specification. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. Large text is defined as at least 18pt (24px) regular or 14pt (18.66px) bold — the rule exists because heavier, larger glyphs remain readable at lower contrast, so the thresholds relax proportionally.
Why contrast matters
Roughly 8% of men and 0.5% of women have some form of color vision deficiency, and contrast is the one accessibility property that helps everyone — not just those with a diagnosed condition. Low-contrast text is hard to read in bright sunlight, on cheap screens, for older users, and for anyone who has ever strained to parse grey-on-grey UI. WCAG's thresholds are calibrated so that AA-compliant text is readable by a large majority of users under typical conditions; AAA is readable by nearly everyone in nearly all conditions.
Contrast is also a legal requirement in many jurisdictions. The US ADA, the EU Web Accessibility Directive, and many national accessibility laws reference WCAG AA as a minimum standard. Shipping a site that fails AA contrast is not just a design choice — in regulated sectors (government, healthcare, finance, education), it can be a compliance failure.
How the check works
- Each color is converted to RGB (from HEX input, color picker, or Pantone dropdown).
- Each RGB channel is linearized via the sRGB gamma curve: c ≤ 0.03928 → c / 12.92; else ((c + 0.055) / 1.055) ^ 2.4.
- Relative luminance is computed as 0.2126 × R + 0.7152 × G + 0.0722 × B.
- Contrast ratio is (Lmax + 0.05) / (Lmin + 0.05).
- The ratio is compared against four thresholds: AA normal (4.5), AA large (3), AAA normal (7), AAA large (4.5).
The order of text and background does not affect the ratio — (Lmax + 0.05) / (Lmin + 0.05) is symmetric. Swapping which color is text vs background produces the same number, which matches how the eye perceives contrast (it is a property of the pair, not of either color individually).
When a pair fails
The suggested alternatives below show the closest Pantone colors that pass AA normal text (4.5:1) against your background, ranked by Delta E 2000 perceptual distance from your original text color. If no near match exists in the Pantone library, the closest reasonable alternatives are shown, and the note explains why. For a UI element with a specific brand color, the alternative approach is to darken the brand color itself by 10–20% lightness — enough to pass AA, close enough to remain on-brand.
Use cases
- Design system auditing. Verify that every text/background pairing in a component library passes WCAG AA before shipping.
- Brand color decisions. Check whether a proposed brand color works as body text on white, or only as an accent.
- Legal compliance. Document contrast for accessibility audits or regulatory reviews.
- Dark mode design. Verify that light-mode-passing pairs still pass when swapped for dark mode.
- Marketing collateral. Print and digital marketing assets must meet the same accessibility bar for public content.
Common mistakes
- Checking contrast at body text size only — large text has relaxed thresholds and often passes where body text fails.
- Assuming "looks different" means "passes contrast" — hue variation does not guarantee luminance variation.
- Trusting an automated tool for full WCAG conformance — contrast is necessary but not sufficient; semantic markup, alt text, and keyboard navigation are also required.
- Over-correcting to AAA everywhere — AAA is stricter than most regulations require; aiming for AA on body and AAA on critical text is a strong and practical target.
- Forgetting that CSS opacity reduces effective contrast — text with
opacity: 0.7has a lower real contrast than the same color at full opacity.
Frequently asked questions
What is WCAG contrast?
WCAG (Web Content Accessibility Guidelines) defines a contrast ratio that measures how readable text in one color will be on a background of another color. The ratio is computed from relative luminance — a weighted sum of linearized sRGB channels — and ranges from 1:1 (identical colors, unreadable) to 21:1 (pure black on white, maximally readable). WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
WCAG defines large text as at least 18pt (24px) regular weight, or 14pt (18.66px) bold. The rule exists because larger, heavier text remains readable at lower contrast ratios — the strokes are thicker, so less contrast is needed to distinguish letterforms. Anything below those thresholds is considered normal text and must pass the stricter 4.5:1 (AA) or 7:1 (AAA) thresholds.
What is the difference between AA and AAA?
WCAG defines three conformance levels: A (minimum), AA (standard), and AAA (enhanced). Most accessibility regulations and industry standards target AA as the required level for public content. AAA is stricter and is often applied to critical information (medical, financial) or required by specific sectors (US Section 508 amendments, EU Accessibility Act adopters). For a general-audience site, hitting AA across the board and AAA on body text is a strong and achievable target.
What does "relative luminance" mean?
Relative luminance is a measure of how much light a color emits or reflects, normalized so that pure black is 0 and pure white is 1. It is computed from the linearized sRGB channels (with gamma removed) using weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue. Those weights reflect the human eye sensitivity — green contributes much more to perceived brightness than red or blue. The WCAG contrast ratio uses luminance because it is the quantity that determines perceived contrast.
Why do colors that look different fail contrast?
Because contrast depends on luminance, not on hue or saturation. Two colors can be extremely different in hue — a saturated red and a saturated blue — but have nearly the same luminance, which means WCAG contrast is low. Conversely, two colors can be nearly identical in hue but different in lightness, producing high contrast. This is why hue-distinct palettes often fail contrast: they are chosen for difference, not for luminance separation.
How do I fix a pair that fails WCAG AA?
Three approaches, in order of typical usefulness: (1) darken the darker of the two colors — a mid-grey on white background fails, but a darker grey passes with no change in hue. (2) lighten the lighter of the two — same idea for dark backgrounds. (3) if the pair is for a specific UI element like a button, swap which color is text vs background. Changing hue alone rarely helps because luminance stays roughly similar across a hue rotation. The suggested-Pantone section below gives starting points if you want a specific accessible code.
Is this tool authoritative for legal accessibility compliance?
No. This tool computes the WCAG contrast ratio correctly, but WCAG conformance requires more than contrast — it requires correct semantic markup, alt text, keyboard navigation, focus indicators, resize tolerance, and several other criteria. Use this tool to verify the contrast component of an audit; do not rely on it alone to claim WCAG conformance. For legal compliance, use a comprehensive audit tool like axe, Lighthouse, or Deque.