Color Contrast Checker

About Color Contrast Checker

This checker computes the contrast ratio between two colors using the WCAG 2.x formula exactly as the spec defines it, then reports AA and AAA results for normal text, large text, and user-interface components. The answer is a single number between 1:1 (identical colors) and 21:1 (black on white).

When a pair fails, the tool keeps the foreground's hue and saturation fixed and scans only HSL lightness from 0 to 100, suggesting the passing color that moves the least from where you started. The point is to find out whether a brand color can be rescued by going a little darker before you throw it out.

How the ratio is actually computed

Each 8-bit channel is divided by 255 to get c, then linearized: c/12.92 if c is at or below the threshold, otherwise ((c + 0.055)/1.055)^2.4. This undoes the sRGB gamma curve so the numbers track physical light rather than code values.

Relative luminance is then L = 0.2126 R + 0.7152 G + 0.0722 B. Green gets nearly ten times the weight of blue because the eye's luminance sensitivity peaks in the green part of the spectrum. The ratio is (L_lighter + 0.05) / (L_darker + 0.05). The 0.05 stands in for ambient flare on a real screen, which is why the scale tops out at 21 instead of running to infinity for pure black.

Older copies of WCAG gave the linearization threshold as 0.03928; in 2021 the text was corrected to 0.04045, the value in the sRGB standard. W3C notes the change has no practical effect, and this tool's code still uses 0.03928. With integer inputs the only channel value that falls between the two thresholds is 10 (10/255 = 0.0392), and both branches give essentially the same result there.

Where 4.5, 3 and 7 come from

According to W3C's Understanding document, 3:1 is the minimum ISO 9241-3 recommends for people with normal vision. Someone with 20/40 acuity typically loses contrast sensitivity by about a factor of 1.5, so 3 × 1.5 = 4.5 became the AA threshold for body text. The 7:1 AAA level is set for roughly 20/80 vision.

Large text means at least 18 point, or 14 point bold. In CSS that is about 24px regular or 18.5px bold (1pt = 1.333px). A bold 16px label is not large text, a mistake that shows up in audits all the time. Large text needs 3:1 for AA and 4.5:1 for AAA.

The 3:1 figure for UI components comes from success criterion 1.4.11 Non-text Contrast, added in WCAG 2.1. It covers the parts you need to see to identify a control and its state: input borders, checkbox outlines, focus indicators, meaningful icons. Disabled controls, logos and pure decoration are exempt.

When the formula gets it wrong

The WCAG 2 ratio is symmetric: gray text on white and white text on the same gray get the same score, even though light-on-dark text in dark themes is widely reported to read differently. It also tends to fail combinations people find perfectly legible, such as white on a saturated orange, while passing some dark-on-dark pairs that look muddy in practice.

Those complaints led to APCA, the Accessible Perceptual Contrast Algorithm, which factors in font size, weight and polarity. APCA appeared in early WCAG 3 drafts but was removed from the July 2023 working draft, and the current WCAG 3 draft says the contrast method is still to be determined. Laws and procurement contracts still point at WCAG 2.x, so this tool deliberately reports only the WCAG 2 ratio. Treat APCA scores from other tools as a design aid, not as compliance evidence.

What contrast does not cover: color vision deficiency

Red-green color vision deficiency affects roughly 8% of men and 0.5% of women of Northern European ancestry, with lower rates (around 4 to 7% of men) reported in East Asian populations. Contrast ratio measures only lightness difference, so a red and a green of similar luminance can pass against a background and still be indistinguishable from each other for these users. Success criterion 1.4.1 exists for exactly this reason: pair color with an icon, a label, or a pattern.

Worked examples

How to use it

1. Enter the text color and background color as HEX or rgb(), or pick them.
2. Read the ratio and the five pass/fail results.
3. If it fails, use the suggested color or the lightness range bar to find the nearest passing shade.

Frequently asked questions

Related guides

• Color Contrast and Accessibility: Where the WCAG Formula Comes From, Its Limits, and the Law