WCAG Contrast Checker
Check the contrast ratio of a text/background pair against WCAG AA and AAA — with live preview at normal and large text sizes.
1,127 views
The quick brown fox jumps over the lazy dog
Large text sample 24px
How the Ratio Is Calculated
The WCAG formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 the darker one — so the result always falls between 1:1 (identical colors) and 21:1 (pure black on pure white). Relative luminance is not a simple average of the RGB channels; it is a perceptually weighted sum, L = 0.2126R + 0.7152G + 0.0722B, applied after each channel is linearized by reversing the sRGB gamma curve (values below 0.03928 divide by 12.92, the rest go through ((c+0.055)/1.055)^2.4). Green contributes roughly ten times as much perceived brightness as blue, so swapping a color's green and blue channels can shift its visible weight dramatically while raw brightness stays the same.
A concrete example: pure medium gray #767676 on a white background computes to exactly 4.54:1 — just over the WCAG AA threshold of 4.5:1 for normal text. Nudge it one step darker to #757575 and it drops to 4.48:1, failing AA. This is why so many gray-on-white designs quietly fail an audit: the visual gap between passing and failing gray is a single RGB step, invisible to most eyes but very visible to an automated scanner or to a low-vision user in bright daylight.
What You Should Know
WCAG 2.1 sets two AA thresholds depending on text size: 4.5:1 for normal text, and a relaxed 3:1 for large text — defined as 18pt (24px) regular weight or 14pt (18.7px) bold and above, since larger strokes stay legible at lower contrast. The stricter AAA level asks for 7:1 on normal text and 4.5:1 on large text. Non-text UI elements such as icons, input borders and focus indicators carry their own 3:1 requirement under WCAG 2.1 SC 1.4.11, measured against the adjacent background color.
These numbers are not arbitrary — they come from research on legibility for users with low vision, color blindness and age-related contrast sensitivity loss, and they double as a legal reference point in accessibility regulations such as the ADA and EN 301 549, the EU standard behind the European Accessibility Act. A contrast failure is one of the most commonly cited issues in automated web accessibility audits, which is why many design systems bake a 4.5:1 floor directly into their color tokens rather than leaving the check to individual designers.
Frequently Asked Questions
Does swapping text and background change the ratio?
No — the formula always puts the lighter color on top, so the ratio is symmetric. Legibility can still differ subjectively (light-on-dark halation), but the WCAG score is identical.
What counts as large text?
24 px (18 pt) regular or about 18.7 px (14 pt) bold and larger. Large text only needs 3:1 at AA because bigger glyphs stay readable at lower contrast.
My brand color fails — what now?
Keep it for decoration and shift the text usage darker or lighter until it passes; a tint/shade scale helps. Placeholder text and disabled states are exempt from the requirement, but keep them reasonable.
Why use gamma-corrected luminance instead of a simple RGB average?
Because perceived brightness is not linear or channel-equal — averaging raw RGB would treat bright yellow (#ffff00) and mid blue (#0000ff) as roughly the same brightness, when yellow reads far brighter to the eye. The gamma-decoding step corrects for how sRGB compresses values instead of storing linear light, and the 0.2126/0.7152/0.0722 weights mirror the eye's greater sensitivity to green, then red, then blue. Skip either step and the numbers stop matching how contrast actually looks.
Does a passing ratio guarantee the colors work for color-blind users?
Not fully — the ratio measures only luminance difference, not hue difference, so two colors can pass 4.5:1 and still be hard to tell apart for someone with deuteranopia if their main difference is hue rather than lightness, as with some red/green pairs at matched brightness. A high contrast ratio is necessary but not sufficient for color-blind accessibility; pairing it with a lightness difference or a non-color cue such as an icon or underline covers both cases.
Similar Tools
Report a Problem
WCAG Contrast Checker
Comments
No comments yet — be the first to write one!