Contrast Ratio

A contrast ratio compares the relative luminance (brightness) of two colors, such as text and its background. It runs from 1:1 (the same color twice) to 21:1 (black on white). WCAG uses it to set minimums: 4.5:1 for normal text, 3:1 for large text and for user interface components and graphics.

This page covers the contrast ratio of colors on a screen, as WCAG defines it. A monitor or TV "contrast ratio" (for example 1000:1) is a different number: it compares the brightest white and the darkest black a display can show, and it has nothing to do with WCAG.

To test a pair of colors now, use the free WCAG contrast checker.

WCAG 2.2 defines the formula. You need the relative luminance of each color first.

Step 1: Convert each sRGB channel to a 0 to 1 value. Divide the 8-bit value by 255. For #767676, each channel is 118 / 255 = 0.4627.

Step 2: Linearize each channel. If the value is 0.04045 or less, divide it by 12.92. If it is higher, use ((value + 0.055) / 1.055) ^ 2.4. For 0.4627 the result is 0.1812.

Step 3: Weight the channels. Relative luminance L = 0.2126 × R + 0.7152 × G + 0.0722 × B, using the linear values. Green counts most because the eye is most sensitive to it. For a gray, R, G and B are equal, so L = 0.1812. White has L = 1. Black has L = 0.

Step 4: Divide. Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. For #767676 on white: (1 + 0.05) / (0.1812 + 0.05) = 4.54:1.

The 0.05 in the formula stands for ambient light reflected from the screen. It is also why the maximum is 21:1 and not infinite: (1 + 0.05) / (0 + 0.05) = 21.

Some older tools use 0.03928 instead of 0.04045 in step 2. The two values come from different versions of the sRGB specification. For 8-bit colors the results are the same.

Three WCAG 2.2 success criteria set contrast minimums:

Criterion	Applies to	Minimum
1.4.3 (AA)	Normal text and images of text	4.5:1
1.4.3 (AA)	Large text	3:1
1.4.6 (AAA)	Normal text	7:1
1.4.6 (AAA)	Large text	4.5:1
1.4.11 (AA)	UI components (borders, focus indicators, states) and graphics needed to understand content	3:1 against adjacent colors

Large text is at least 18 point (24 CSS px) regular, or at least 14 point (about 18.66 CSS px) bold.

Exceptions to 1.4.3: text in an inactive (disabled) control, pure decoration, text nobody can see, text that is an incidental part of a picture, and logos or brand names.

Why 4.5:1 and 7:1: the W3C "Understanding SC 1.4.3" document says 4.5:1 makes up for the loss of contrast sensitivity typical of vision near 20/40. The 7:1 level does the same for vision near 20/80.

Which level to target: ADA, Section 508, the European Accessibility Act (through EN 301 549) and AODA all point to Level AA. So 4.5:1 and 3:1 are the numbers most teams must meet. 7:1 is Level AAA and is not required for conformance.

Thresholds are hard limits. A ratio of 4.49:1 fails 4.5:1. Do not round up.

We calculated each pair below with the WCAG 2.2 formula and cut (did not round) the result to two decimals. "Pass" means the pair meets 4.5:1 for normal text. "Large text only" means it meets 3:1 but not 4.5:1.

Text on background	Ratio	WCAG AA result
#000000 on #FFFFFF	21:1	Pass
#333333 on #FFFFFF	12.63:1	Pass
#595959 on #FFFFFF	7:1	Pass
#767676 on #FFFFFF	4.54:1	Pass
#777777 on #FFFFFF	4.47:1	Large text only
#949494 on #FFFFFF	3.03:1	Large text only
#999999 on #FFFFFF	2.84:1	Fail
#FFFFFF on #0066CC	5.56:1	Pass
#FFFFFF on #CC0000	5.88:1	Pass
#E0E0E0 on #121212	14.19:1	Pass

#595959 on white is exactly 7:1, so it also meets Level AAA for normal text. #767676 is the lightest gray that passes 4.5:1 on white. One step lighter, #777777, fails. Small color changes near a threshold decide the result, so always measure.

Rounding up. A tool that shows 4.5 for a pair that is really 4.48 hides a failure. Use a tool that shows the unrounded value or cuts it.

Ignoring transparency. For text with opacity or an rgba() color, first blend the color with the background it sits on. Then measure the blended color.

Text over images and gradients. Measure against the lightest part of the background behind light text, or the darkest part behind dark text. A solid or semi-transparent backing behind the text makes the result stable.

Forgetting states. Hover, focus, visited and error states each need their own check. Focus indicators and input borders fall under SC 1.4.11 (3:1).

Light placeholder text. If a placeholder gives users information they need, check it like any other text.

Treating APCA as the rule. APCA is an alternative contrast method that was proposed for WCAG 3. The current WCAG 3 draft has not chosen a contrast algorithm, WCAG 3 is not final, and no law refers to it. Conformance today uses the WCAG 2 ratio on this page.

One color pair: enter the text and background colors in the WCAG contrast checker. It shows the ratio and the AA and AAA results for normal text, large text and UI components.

In the browser: Chrome DevTools shows the contrast ratio in the color picker when you inspect a text color.

A whole site: run the website accessibility checker. It scans each page for color contrast failures and other WCAG issues.

Before a compliance deadline: an accessibility audit adds manual review of the cases tools cannot measure, such as text on images.

For a longer guide to color and WCAG, read color contrast for accessibility.