WCAG Contrast Ratios: Calculate, Interpret and Fix a Failing Pair

A contrast ratio answers a narrow question: how far apart are the relative luminances of two colors? It does not tell you whether a palette is attractive, a button is obvious, or an entire page is accessible. Use it for a specified foreground, background and text role, then test the result in the interface.

Start with a pair that almost passes

This pair is close enough to expose a common implementation error. A rounded display can look like 4.5:1, but the actual value is below that threshold. A calculator must compare the original number with the requirement before formatting the result. Changing the foreground by only one channel step can change the decision near a boundary.

Calculate from channels, not an RGB average

Split the HEX code into red, green and blue bytes. Divide each byte by 255. For each normalized channel c, use c/12.92 when c is at most 0.04045; otherwise use ((c + 0.055)/1.055)^2.4. Combine the linear values using 0.2126 red, 0.7152 green and 0.0722 blue. Finally divide the lighter luminance plus 0.05 by the darker luminance plus 0.05.

For black the luminance is zero, and for white it is one. That gives 1.05/0.05 = 21. Identical colors always give 1. These are useful baseline checks when comparing calculators or investigating a regression. Averaging the three original byte values misses both the transfer function and the different channel weights.

Choose the requirement for the actual text

• •AA normal text: at least 4.5:1. AAA normal text: at least 7:1.
• •AA large text: at least 3:1. AAA large text: at least 4.5:1.
• •Large text begins at 18pt (24 CSS px), or 14pt (about 18.67 CSS px) when bold. A 14px bold label is still normal text.

Fix the foreground, then verify the exported value

Open this example in the contrast checker, choose the target, and apply the suggested foreground. Keep the surface fixed so the effect of the change is clear.

Color Match searches lighter and darker OKLCH values and tests the final rounded sRGB output. Gamut clipping can change saturation or hue, so inspect the suggested color beside the original. The tool does not claim to find a globally optimal color. It offers a passing candidate when one is available.

Know when the input is incomplete

An opaque HEX pair does not describe translucent text, a photograph, a gradient or a blend mode. Work out the composited colors and inspect the least favorable region behind the text. Keep a record of the element, state, font size, weight, pair and threshold. This makes the test repeatable after a design-token update.