♿ Color Contrast Checker

When the World Wide Web Consortium published WCAG 2.0 in 2008, contrast ratio was already one of its most specific, measurable requirements. Unlike subjective guidelines about "clear language" or "consistent navigation," the contrast requirement gave designers an exact number to hit. Today, eighteen years later, that number remains one of the most cited — and most misunderstood — metrics in digital accessibility. This article unpacks what the contrast ratio actually measures, why the thresholds exist where they do, and what the pass/fail badges really mean in practice.

How the WCAG Contrast Ratio Is Actually Computed

The formula starts with relative luminance, a measure of how much light a color emits relative to a pure white reference. But you cannot just average the RGB values — the relationship between a pixel's encoded color value and the light it produces on screen is nonlinear, a legacy of cathode-ray tube technology that live screen standards inherited.

The conversion involves two steps. First, each channel (red, green, blue) is linearized by reversing the sRGB gamma curve: values at or below 0.04045 are divided by 12.92; values above that threshold use the formula ((c + 0.055) / 1.055) ^ 2.4. Second, the three linearized channels are combined with different weights — 0.2126 for red, 0.7152 for green, 0.0722 for blue — reflecting human vision's much greater sensitivity to green wavelengths and relative insensitivity to blue.

From these two luminance values — call them L1 (the lighter) and L2 (the darker) — the contrast ratio is simply (L1 + 0.05) / (L2 + 0.05). The 0.05 offsets prevent a divide-by-zero when comparing against absolute black, and they approximate the ambient light reflecting off a typical screen in a typical room. Pure black on pure white yields exactly 21:1; identical colors always yield 1:1.

Why 4.5:1 and 7:1? The Research Behind the Numbers

The thresholds did not emerge from pure theory. They are grounded in data collected from users with moderately low vision — roughly the equivalent of 20/80 visual acuity without corrective lenses. Studies referenced during the WCAG 2 development process found that readers with this level of impairment could comfortably process text when contrast ratios reached approximately 4.5:1 for normal-sized body copy. That became the AA standard.

The 7:1 AAA threshold targets users with more severe vision loss, approximately 20/200 acuity, which is the legal definition of blindness in many jurisdictions. At 7:1, there is meaningful headroom above the 4.5:1 minimum, helping people who use screen magnification (which can degrade perceived contrast) or who read in challenging lighting conditions.

Large text — defined as 18pt (24px) or 14pt bold (roughly 18.67px bold) — gets a lighter treatment: 3:1 for AA, 4.5:1 for AAA. The rationale is that larger glyphs provide more visual information per character, making individual letterforms easier to distinguish even at lower contrast. A 40px heading at 3.1:1 is meaningfully more readable than an 14px paragraph at the same ratio.

What the Standard Does Not Measure

Contrast ratio, as defined by WCAG, is a pairwise comparison of exactly two colors. Real-world interfaces are rarely that clean. Anti-aliasing spreads text rendering across multiple pixel values. Text placed over photographs has hundreds of background values simultaneously. Gradients mean the contrast at the left edge of a word differs from the right. The standard acknowledges these limitations implicitly — WCAG 1.4.3 specifies that the contrast requirement applies to text "as it appears on screen," but the mechanics of applying a single ratio to complex backgrounds are left to the designer's judgment.

Semi-transparent colors introduce another gap. Two colors that both have alpha values create a composite that depends on what lies beneath them in the stacking context, making a reliable two-color ratio impossible to calculate without knowing the actual rendered output. The tool on this page works with opaque hex colors only, which is appropriate for the mathematical specification but means designs using transparency layers need extra care.

Color blindness is a related but separate concern. A red-on-green pairing might achieve a passing contrast ratio in luminance terms while being completely indistinguishable to someone with deuteranopia. WCAG 1.4.1 (Use of Color) addresses this separately from the contrast requirements in 1.4.3, and no single contrast ratio check can substitute for testing with actual color-vision simulation tools.

The Compliance Landscape in 2024

WCAG 2.1 (2018) is currently the most widely referenced version in legal and regulatory frameworks. The European Accessibility Act, which came into full force in 2025, mandates WCAG 2.1 AA for most digital products sold in EU member states. In the United States, Section 508 of the Rehabilitation Act incorporates WCAG 2.0 AA, and many state-level procurement rules reference 2.1. The UK's Public Sector Bodies Accessibility Regulations similarly require AA compliance.

WCAG 2.2, finalized in October 2023, did not change the contrast ratio requirements in 1.4.3 or 1.4.11 (Non-text Contrast). The more significant shift in the pipeline is WCAG 3.0's proposed replacement of the current algorithm with APCA — the Advanced Perceptual Contrast Algorithm — developed by Andrew Somers. APCA accounts for font weight, character size, and viewing conditions simultaneously, producing a single score rather than a ratio. As of mid-2025, APCA is still experimental guidance in WCAG 3.0's working drafts, not normative, and no jurisdiction has adopted it in law. For the foreseeable future, the 2.1 formula remains the standard for legal compliance.

Practical Color Choices That Hit the Targets

A few patterns consistently produce accessible combinations without sacrificing visual appeal. Deep navy against off-white — for example, #1e293b on #f8fafc — achieves approximately 16.7:1, well into AAA territory for all text sizes, while reading as polished rather than stark. The traditional pure-black-on-pure-white at 21:1 can feel harsh; #1a1a1a on #ffffff lands at about 19.5:1 and feels softer. For colored text, saturated purples and blues tend to have low enough luminance to pass against white backgrounds, while saturated yellows, greens, and cyans often fail at normal text sizes because they carry high luminance values.

One frequently overlooked failure mode is light-gray placeholder text. The popular CSS convention of using #999 as a placeholder color yields approximately 2.85:1 against white — failing AA at every text size. This is not merely an aesthetic choice; placeholder text is meaningful interface content, and the Web Content Accessibility Guidelines treat it accordingly. The lowest gray that passes AA normal text on white is approximately #767676, which reaches exactly 4.54:1.

Interactive element states deserve special attention. Focus outlines, hover states, and disabled state text all have contrast requirements — the non-text contrast criterion (WCAG 1.4.11) requires UI components to reach 3:1 against adjacent colors. A button outline at 2.9:1 fails even if the button text inside it passes at 5:1. Checking contrast is not a one-time design step; it is an audit that should touch every interactive and meaningful visual element in a system.