Free Color Contrast Checker

How this tool computes its result

Implements the WCAG 2.x relative luminance formula directly: each hex color is split into R/G/B channels, linearized with the piecewise sRGB function (channel/12.92 below 0.03928, otherwise ((channel+0.055)/1.055)^2.4), then combined as 0.2126R + 0.7152G + 0.0722B. Contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05). Hex input is normalized first — 3-digit shorthand is expanded to 6 digits, and anything not matching 6 hex characters (with or without a leading #) is rejected. The result is checked against four fixed WCAG thresholds: AA normal text 4.5:1, AA large text 3:1, AAA normal text 7:1, AAA large text 4.5:1.

Worked example

With the tool's defaults — foreground #111111, background #ffffff — the linearized luminance of #111111 works out to about 0.0076 and pure white to 1.0, giving a contrast ratio of (1.0 + 0.05) / (0.0076 + 0.05) ≈ 18.2:1. That clears all four thresholds (4.5, 3, 7, 4.5), so every WCAG band shows "Pass."

When not to use this tool

It checks exactly one foreground/background pair typed in as solid hex colors — it doesn't crawl a live page to find every text/background combination, doesn't account for gradients or images behind text, and has no notion of alpha transparency in the luminance math, so it's a spot-check, not a full accessibility scan.

Common mistakes

• - Entering a CSS color name (e.g. "black") or an rgb()/hsl() string instead of hex — the normalizer only accepts 3- or 6-digit hex values with or without a leading #; anything else returns an empty string and the tool shows "Enter valid hex colors" rather than attempting to parse it.
• - Reading the "Pass" badges without knowing your actual font size — the tool computes all four thresholds at once but has no font-size input, so you have to independently know whether your text qualifies as "large" (roughly 18pt+/14pt bold+) to pick the relevant AA/AAA column.
• - Checking colors intended to be used with partial opacity — the formula assumes fully opaque colors; a semi-transparent overlay's real on-screen contrast against whatever is behind it won't match the ratio reported here.

Related tools