What is the WCAG contrast ratio formula?

The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker one. Luminance is computed by linearizing each sRGB channel (removing gamma), then weighting the three channels by 0.2126 (R), 0.7152 (G), and 0.0722 (B). The result ranges from 1:1 for identical colors up to 21:1 for pure black on pure white.

Why does the formula add 0.05 to both sides?

The +0.05 offset accounts for a small amount of ambient luminance that represents the light reflected from a real display in a real room. Without it, pure black (luminance = 0) would produce an infinite ratio against any other color. Adding 0.05 to both numerator and denominator keeps the math well-behaved while accurately modeling physical viewing conditions.

What is sRGB linearization and why does it matter?

Screen colors are stored in sRGB, which applies a gamma curve to match human visual perception. Before computing luminance you must reverse that curve so channels represent actual light intensity, not perceptual encoding. The linearization formula is: if the channel (0-1) is less than or equal to 0.03928 divide by 12.92, otherwise compute ((channel + 0.055) / 1.055) to the power 2.4. Skipping this step produces luminance values that are wrong by up to 20%, which is why many informal contrast tools give incorrect ratios.

What contrast ratios are required for WCAG AA and AAA?

WCAG AA requires 4.5:1 for normal body text and 3:1 for large text (at least 18.66px bold or 24px regular). AAA requires 7:1 for normal text and 4.5:1 for large text. User-interface components such as input borders and icons require 3:1 under success criterion 1.4.11. The harder the visual job, the higher the ratio you need.

Does this tool handle hsl() and named colors?

Yes. The parser accepts #hex (3, 6, or 8 digit), rgb(), rgba(), hsl(), hsla(), and over 30 CSS named colors including black, white, navy, coral, slate, and so on. HSL input is converted to RGB internally before luminance is computed. The format display below each input shows the normalized hex and rgb() equivalents so you always know exactly which color was parsed.

How does the "Find a passing foreground" feature work?

The tool uses binary search over the HSL lightness axis at your chosen hue. It runs up to 30 iterations, halving the search range each time based on whether the candidate clears the target ratio. It then checks a fully saturated version at the same lightness level. This finds the lightest possible shade at that hue that still passes, giving you the most readable color that meets your target level rather than just defaulting to black.

Color Contrast Ratio Checker

A color contrast ratio checker that goes further than a simple pass/fail — it shows the complete WCAG 2.x calculation line by line, so you understand exactly why a ratio is 4.54:1 rather than 4.5:1, and precisely how to adjust a color to cross a threshold. It is built for designers who want to see the math, developers who need an audit-ready report, and accessibility reviewers who have to justify every decision to a compliance team.

How it works

Every pixel color on a modern screen is encoded in sRGB, a color space that applies a gamma curve to compress bright values, because human vision is more sensitive to differences in dark tones than in bright ones. Before comparing two colors, the WCAG specification requires you to reverse that encoding and work in linear light, where values are proportional to actual photon counts. This is called sRGB linearization.

The linearization formula for each 8-bit channel c (in the range 0–255) is:

First normalize: c_norm = c / 255
If c_norm <= 0.03928: c_lin = c_norm / 12.92
Otherwise: c_lin = ((c_norm + 0.055) / 1.055) raised to the power 2.4

Once you have linear R, G, B values for a color, the relative luminance L is:

L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin

The green coefficient (0.7152) dominates because the eye is most sensitive to green light. Red contributes moderately, and blue contributes the least at 0.0722.

With luminance values L1 (lighter) and L2 (darker) computed for both colors, the contrast ratio is:

ratio = (L1 + 0.05) / (L2 + 0.05)

The constant 0.05 represents ambient reflected light and prevents division by zero when one color is pure black (L = 0).

Worked example

Take foreground #767676 (mid-grey) on background #ffffff (white).

White has R=G=B=255, so all three channels linearize to 1.0, and L(white) = 1.0000.
The grey channels are 118/255 ≈ 0.4627. The linearized value is ((0.4627 + 0.055) / 1.055)^2.4 ≈ 0.1812. Since all three channels are the same, L(grey) = 0.1812.
Lighter is white at 1.0000; darker is grey at 0.1812.
ratio = (1.0000 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312 ≈ 4.54:1.

That just clears the AA normal text threshold of 4.5:1. Lighten the grey to #999999 and luminance rises to about 0.3185, making the ratio (1.05 / 0.3685) ≈ 2.85:1, which fails AA completely.

Foreground	Background	Luminance FG	Luminance BG	Ratio	AA normal
#000000	#ffffff	0.0000	1.0000	21.00:1	Pass
#1a1a1a	#ffffff	0.0103	1.0000	17.40:1	Pass
#767676	#ffffff	0.1812	1.0000	4.54:1	Pass
#999999	#ffffff	0.3185	1.0000	2.85:1	Fail
#ffd500	#000000	0.6885	0.0000	14.77:1	Pass

Formula reference

The three coefficients (0.2126, 0.7152, 0.0722) are defined in the IEC 61966-2-1 sRGB standard and adopted by WCAG. They represent the CIE Y (luminance) component of each primary when converted from sRGB chromaticities. WCAG 2.0 uses the slightly older threshold of 0.03928 for the linearization branch (technically 0.04045 in IEC 61966-2-1 — the difference is negligible in practice); WCAG 3 is exploring the newer APCA model, but WCAG 2.x ratios remain the legal standard under WCAG 2.1 and EN 301 549.

The tool stores your colors in localStorage so you never lose work between sessions, and nothing is uploaded to any server.