Contrast ratio calculator

One number between 1 and 21

You can read text when it’s clearly lighter or darker than what’s behind it. Hue hardly matters. Pure red on pure green is two very different colors with almost the same brightness, and the letters seem to vibrate. So WCAG measures the difference in relative luminance, the amount of light a color sends to the eye on a scale from 0 (black) to 1 (white).

To compute it, each of the red, green and blue channels is converted from its stored value to linear light, then the three are weighted by how sensitive the eye is to each:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

Green counts for more than 70% of the result and blue for about 7%. That’s why pure blue #0000ff behaves like a dark color and pure yellow like a light one. Two identical colors give 1:1. Black on white gives 21:1. Swapping text and background doesn’t change the ratio.

The thresholds and where they apply

AA is the level that laws and procurement rules generally point to, including the European standard EN 301 549 and Section 508 in the United States. AAA is something to aim for where people read at length. Logos, disabled controls and purely decorative text are exempt.

A handy landmark is the gray #767676, which reaches 4.54:1 on white and passes AA. One step lighter, #777777 gives 4.47:1 and fails.

How the suggested shade is chosen

When normal-size text comes in under 4.5:1, the calculator converts the text color to hue, saturation and lightness. It keeps the first two and moves the lightness in steps of half a percent, darker and lighter in turn, until the ratio against your background reaches 4.5. The first hit is the nearest shade that passes, so your blue stays your blue. Sometimes no lightness of the text color can pass, typically against a mid-tone background. In that case it tries adjusting the background the same way. Select Use to apply the suggestion.

Mid-tone backgrounds are the hard case. A medium gray such as #808080 gives about 3.9:1 against white and 5.3:1 against black, so only very dark text works on it. Brand oranges and bright greens have the same problem with white text. You’ll have to darken the background or switch to dark text.

Getting colors in and out

Both fields take anything a browser understands as a CSS color: #1d3557, 1d3557, rgb(29 53 87), hsl(215 50% 23%) or a name such as teal. To read a color from a live page, open the developer tools, select the text and copy the computed color and background-color values.

The page address updates with every change, in the form ?fg=1d3557&bg=ffffff. Copy it to send a colleague the exact pair you’re arguing about. To test a whole brand palette in one pass, use the palette contrast grid.

What a ratio doesn’t tell you

• Transparency. Any alpha value is ignored. For semi-transparent text, measure the blended color the screen ends up displaying.
• Images and gradients. A background photo has many colors. Test the lightest and the darkest area behind the text, or put a solid panel under it.
• Font weight and size below the thresholds. A thin 12 px font at 4.6:1 passes on paper and is still hard to read.
• Dark themes. The WCAG 2 formula is known to overrate some dark pairs. If light text on a dark background barely passes, look at it with your own eyes too, for instance in the vision simulator.