Contrast Checker

Color contrast ratio is the relative luminance difference between two colors, expressed as a value from 1:1 (identical) to 21:1 (black on white). WCAG sets thresholds: 4.5:1 for normal text at AA, 7:1 at AAA.

Given a foreground and background color, the checker computes the ratio and reports pass or fail status across the four WCAG categories. It flags large text (18pt+ or 14pt bold), which has relaxed thresholds of 3:1 (AA) and 4.5:1 (AAA).

The formula is well-defined. For each color, compute relative luminance — a weighted sum of gamma-corrected RGB channels (0.2126R + 0.7152G + 0.0722B, after sRGB linearization). The ratio is (L_lighter + 0.05) / (L_darker + 0.05). The 0.05 offsets account for ambient screen reflection. Black on white gives the maximum 21:1; identical colors give 1:1. The math is hue-blind by design — luminance is what determines legibility, not the colors themselves.

A worked example. Foreground #2D6CDF (a mid-saturation blue), background #FFFFFF. Linearized RGB for the blue: about (0.029, 0.149, 0.706). Weighted luminance: 0.151. White luminance is 1.0. Ratio: (1.0 + 0.05) / (0.151 + 0.05) = 5.22:1. That passes AA for normal text (>4.5:1) but fails AAA (<7:1). Drop the blue darker to #1E4FAF and the ratio jumps to 7.8:1, clearing AAA.

Where the checker gives misleading-feeling results: translucent overlays, gradients, and text-over-image. WCAG uses point-color contrast, not perceived contrast across a complex background. Text over a photo can technically pass at the brightest point and fail elsewhere; conformance testing usually requires picking the worst case. Forced-colors mode (high-contrast Windows themes) overrides your colors entirely. And WCAG 2.x ignores font weight beyond the simple bold cutoff — extra-thin display fonts at 4.5:1 read worse than the formula suggests. APCA, the proposed WCAG 3 contrast algorithm, addresses these by accounting for font weight and size more precisely, but it's not yet a conformance standard.