Check Every Foreground/Background Pair in Your Palette for WCAG Contrast
Drop in your hex colors and this tool builds a full N×N contrast matrix — every ordered pair scored against WCAG 2.x AA and AAA thresholds for normal text, large text, and non-text UI components. Instantly see which combinations are legally usable and which will fail an audit.
How the contrast ratio is computed
This tool implements the WCAG 2.x relative-luminance and contrast-ratio definitions exactly. For each color, the three 8-bit hex channels are normalized to the 0–1 sRGB range. Each channel is then linearized (gamma-expanded): if the normalized value c ≤ 0.03928 it becomes c / 12.92, otherwise ((c + 0.055) / 1.055) ^ 2.4. This undoes the sRGB transfer curve so the values represent linear light.
Relative luminance is the weighted sum L = 0.2126·R + 0.7152·G + 0.0722·B of those linear channels, reflecting the eye's sensitivity to green over red and blue. For any two colors the contrast ratio is (Lmax + 0.05) / (Lmin + 0.05), where the 0.05 flare term models ambient reflection and keeps the range bounded between 1:1 and 21:1.
Each cell is then classified. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (≥18.66px bold, or ≥24px regular). AAA raises those to 7:1 and 4.5:1. Separately, WCAG 2.1's Success Criterion 1.4.11 requires 3:1 for user-interface components and meaningful graphical objects — the "UI / non-text" mode. Because contrast is symmetric, swapping foreground and background yields the same ratio, but the matrix keeps both orderings so you can read it as "this text color on that background." Everything runs locally in your browser; no color ever leaves the page.