Contrast Checker

How it works

WCAG 2.x defines contrast as a ratio between two colors' relative luminance, computed by gamma-correcting each sRGB channel (undoing the display gamma curve to get linear light), weighting the linear R/G/B channels by their contribution to perceived brightness (roughly 21% red, 72% green, 7% blue — green dominates because the eye is most sensitive to it), summing them into a single luminance value L1 for the lighter color and L2 for the darker, then computing (L1 + 0.05) / (L2 + 0.05). The added 0.05 accounts for ambient light scatter so the ratio never divides by exactly zero even for pure black on pure black. It's worth being explicit that this formula measures luminance contrast only — it says nothing about hue difference, so two colors of very different hue but similar luminance (a mid-saturation orange and a mid-saturation green, for instance) can pass the WCAG ratio comfortably while still being genuinely hard to tell apart for someone with a color-vision deficiency, which is exactly the gap the Color-Blindness Simulator is built to catch.

Worked example

Black text (#000000) on white (#FFFFFF) gives the maximum possible ratio, 21:1. A mid-gray #767676 on white computes to almost exactly 4.54:1 — just over the 4.5:1 AA floor for normal text, which is why #767676 is a commonly cited 'just barely passes' reference gray in accessibility guides. Drop to #999999 on white and the ratio falls to roughly 2.85:1, failing AA outright despite looking only slightly lighter to the eye. A colored pairing shows the same sensitivity: #4C8DF6 (a mid-saturation blue) on white computes to roughly 3.1:1 — enough to pass the 3:1 large-text and UI-component thresholds but not the 4.5:1 normal-text floor, which is a genuinely common real-world failure mode: a brand blue that looks perfectly readable as a large heading fails the moment the same color is reused for smaller body copy or a caption.

When to use this tool

Run every text/background and icon/background pairing your product actually ships through this tool before launch, not just your primary brand colors — disabled states, placeholder text, and secondary/muted text colors are the most common places a real contrast failure hides, precisely because they're deliberately lower-contrast by design intent and easy to push too far. It's also worth checking any color used purely for a focus ring, form-field border, or icon-only button against its background, since WCAG 2.1's non-text contrast criterion (below) applies to interactive-element boundaries just as much as it applies to text, and those elements are frequently overlooked in a review that only checks headline and body copy. Pair this with the Color-Blindness Simulator for a fuller accessibility check, since a pairing can pass WCAG contrast math and still collapse together under color-vision deficiency if the failure is about hue rather than luminance.

Precision & accuracy

Contrast ratios are computed to two decimal places following the WCAG 2.x formula exactly (relative luminance via gamma-decoded, channel-weighted RGB, then the (L1+0.05)/(L2+0.05) ratio) — the same formula every major accessibility auditing tool (axe, Lighthouse, WAVE) uses, so a ratio computed here should match what those tools report for the same two colors within rounding, letting you cross-check results across tools with confidence. One precision caveat worth flagging: this formula is the WCAG 2.x version, not the newer APCA (Advanced Perceptual Contrast Algorithm) model being developed for a future WCAG 3 — APCA weights light-text-on-dark-background and dark-text-on-light-background differently and produces meaningfully different numbers for some pairings, so if a design brief specifies APCA compliance rather than the current WCAG 2.x ratio, this tool's output isn't a direct substitute for that separate check.

FAQ