Color contrast pairs: how the ratios work and how to fix failures
What a contrast ratio is
A contrast ratio is a single number that says how far apart the brightness of two colors is, usually text against its background. It runs from 1:1 (identical colors, nothing to read) up to 21:1 (black on white). The pages listed above each take one text color and one background and report the ratio, whether it passes the accessibility thresholds, and a suggested fix. If your pair is not listed, the contrast checker works for any two colors.
How the ratio is computed
The WCAG 2.x formula works in three steps. First, each sRGB channel (0 to 255) is divided by 255 and linearised: values at or below 0.04045 are divided by 12.92, and larger values become ((c + 0.055) / 1.055) raised to the power 2.4. This undoes the gamma curve so the numbers are proportional to light. Second, the relative luminance is a weighted sum, L = 0.2126 R + 0.7152 G + 0.0722 B, where green counts most because the eye is most sensitive to it. Third, the ratio is (L1 + 0.05) / (L2 + 0.05), with L1 the lighter color and L2 the darker one. The 0.05 term stands in for ambient light and stops the ratio from exploding near black.
Two things follow from the formula. The ratio is symmetric, so black on white and white on black give the same 21:1. And it is based on luminance only, so it says nothing about hue: a red and a green with similar luminance have a ratio close to 1:1 even though they look different. Our WCAG vs APCA guide goes through the limits of the formula in more detail.
WCAG 2.2 thresholds
Level AA, the usual legal and procurement target, asks for at least 4.5:1 for normal text and 3:1 for large text. Large means at least 24 CSS pixels (18pt) in regular weight, or at least about 18.66 pixels (14pt) in bold. Success criterion 1.4.11 Non-text Contrast adds 3:1 for user interface components and graphical objects that you need to understand the content, such as input borders, icons that carry meaning, focus indicators and chart elements. Level AAA, which is stricter and rarely required for a whole site, asks for 7:1 for normal text and 4.5:1 for large text.
Logos and purely decorative elements are exempt, and so is text in disabled controls. Thresholds are minimums, not targets: a 4.5:1 pair passes, but thin type at small sizes, low-quality screens or bright sunlight all make reading harder, so aim above the line for body text. Rounding is not allowed, so 4.49:1 fails.
APCA and the Lc score
APCA (the Accessible Perceptual Contrast Algorithm) is a newer method that scores a pair as a lightness contrast value, Lc, from about 0 to about 106 in magnitude. Unlike the WCAG ratio it is polarity-aware: dark text on a light background and light text on a dark background give different scores, which matches how people actually read. It also expects you to read the score against font size and weight. As a rough guide, Lc 75 is a common target for body text, about Lc 60 for larger text, about Lc 45 for large or bold headlines, and roughly Lc 15 to 30 for non-text elements such as faint separators. These are guidelines that depend on the font, not fixed pass marks.
APCA is a candidate method for WCAG 3, which is still a draft. It is not part of WCAG 2.2, so it is not a current conformance or legal requirement, and you should keep using the WCAG 2 ratio for compliance. Treat Lc as a second opinion, especially for dark mode and thin fonts where the WCAG ratio can be too generous or too strict. Every pair page shows both numbers side by side.
Common failing pairs and how to fix them
The same few combinations fail again and again. Light grey text on white is the classic one: mid grey #808080 on white reaches only about 3.9:1, short of 4.5:1 for body text. White on yellow, as in white on #FFFF00, is close to 1:1, and white on orange reaches only about 2:1, so both need dark text instead. Pure white on red is just under 4:1, enough for large text but not for body copy. Saturated mid-blues on dark backgrounds, for example pure blue on black, fall around 2.4:1 even though they look vivid. Red against green is a different problem: the luminance can be nearly equal, and many people with red-green color vision deficiency cannot tell the two apart at all.
The most reliable fix is to change lightness and leave hue and chroma alone. In OKLCH the L channel tracks perceived brightness, so lowering L on a grey or a blue text color darkens it without turning it into a different color, and raising L does the same on a dark background. Change L in small steps, re-check the ratio, and stop at the first step that passes, which keeps the color as close to your brand as possible. If the chroma becomes too high for sRGB at the new lightness, reduce it slightly. That is exactly what the suggested fix on every pair page does. You can do it by hand in the OKLCH picker. When you pass a pair, also check that meaning is not carried by color alone, as described in our color meaning guide.
How the pair pages here are organised
Each page is addressed as /contrast/<text hex>-on-<background hex>. The lists above are generated from the site's color data rather than written by hand. They take the most commonly searched colors from our named-color dictionary and show each as text on white and on black, and white and black text on each color. Beyond those lists, the full set also includes the CSS named colors and pairs against a few common backgrounds: black, white and three greys. Because the page is calculated from the two hex values, any valid pair works if you type it into the address bar, but only the curated pairs are listed in our sitemap. Each page shows the WCAG 2.2 ratio with AA and AAA results for normal text, large text and UI, the APCA Lc score, and the smallest OKLCH lightness change that reaches 4.5:1.
To go from a pair to the color itself, open its page in the color library for conversions, tints and shades. For ready-made palettes with contrast already checked, browse Explore. If you want the numbers in your own tooling, the developer API returns color values as JSON, and the comparison pages show how contrast checks differ between palette tools.