WCAG contrast ratio rules: 4.5:1, 3:1 and 7:1

The WCAG contrast ratio thresholds at a glance

WCAG states the AA rule in one line. In its words, the visual presentation of text "has a contrast ratio of at least 4.5:1" (WCAG 2.2, 1.4.3), followed by the exceptions. Everything else on this page explains that sentence.

The rules cover text and images of text: paragraphs, headings, links, button labels, form labels, placeholder text, error messages and words baked into a banner image. Icons, input borders and chart lines fall under a different rule, the non-text contrast rule, number 1.4.11, which asks for 3:1.

WCAG AA contrast is what most laws and contracts expect, because they point to level AA as a whole. AAA is a goal for some projects, not a usual legal requirement. Our page on conformance levels shows how the three fit together.

What counts as large text

WCAG defines large text in points, a print unit. Browsers work in CSS pixels, and one point equals about 1.333 CSS pixels. That gives two cut off lines:

Two traps catch people here. First, a 20 px regular heading looks big but is still normal text, so it needs 4.5:1. Second, "bold" means a real bold weight, usually font-weight: 700; a semi bold of 600 in a thin font family should not be counted as bold. When in doubt, treat the text as normal and aim for 4.5:1.

How the contrast ratio is calculated

The ratio compares how much light two colors give off. WCAG calls that amount relative luminance: 0 for pure black, 1 for pure white, and a number in between for every other color.

1. Split each hex color into red, green and blue, each from 0 to 255, and divide by 255.
2. Undo the screen gamma for each channel: if the value is 0.04045 or less, divide it by 12.92; otherwise add 0.055, divide by 1.055 and raise the result to the power 2.4.
3. Weight the channels the way human eyes do: luminance L = 0.2126 R + 0.7152 G + 0.0722 B. Green counts most, blue least.
4. Take the lighter luminance as L1 and the darker as L2, then divide: (L1 + 0.05) / (L2 + 0.05).

A worked example with #767676 on white. Each channel is 118, and 118 / 255 is about 0.4627. After step 2 that becomes about 0.1812, so L for the grey is 0.1812 (all three channels are equal). White has L = 1. The ratio is (1 + 0.05) / (0.1812 + 0.05), which is 1.05 / 0.2312, about 4.54. That is why this grey is the usual answer to "the lightest grey that passes on white".

The 0.05 added to both sides stands in for a little glare on any real screen. It is also why the scale stops at 21:1: (1 + 0.05) / (0 + 0.05) is exactly 21. The color contrast checker runs this same formula as you type.

Common greys on white and their ratios

Each ratio below was calculated with the WCAG formula and cut to two decimals, never rounded up. The swatch shows the first passing grey and the first failing one side by side.

#767676 on white #777777 on white

Notice how sharp the edges are. #767676 passes at 4.54:1 and #777777, one shade lighter, fails at 4.47:1. #949494 just clears 3:1 for large text and interface parts, and #959595 misses it at 2.99:1. On a light grey panel the numbers drop: #767676 on #f5f5f5 is only 4.16:1.

What is exempt from 1.4.3

Some text has no contrast requirement at all. WCAG lists these cases:

• Logos and brand names that are part of a logo, also called logotypes.
• Inactive controls, such as a disabled button that cannot be used. The text on it may be pale. As soon as it becomes active, it must pass.
• Pure decoration, such as a large faded word used as a background pattern that carries no meaning.
• Incidental text in a picture, like a shop sign in a street photo, where the text is not the point of the image.
• Text nobody can see, such as hidden text meant only for screen readers.

Common mistakes, with a failing and passing example

Most contrast fails in audits come from a few habits:

• Rounding 4.47 or 4.49 up to 4.5 and calling it a pass.
• Testing against the page background when the text sits on a card, banner or button with its own color.
• Using opacity or a transparent text color, then testing the original color instead of the blended result.
• Checking the default state only and skipping hover, focus and visited link colors.

.help { color: #000000; opacity: 0.4; }

.help { color: #666666; }

A real check of a full page combines a scan with manual spot checks. Our WCAG checklist lists contrast alongside every other criterion you need for AA.

How contrast fits with nearby WCAG rules

Contrast sits in the Perceivable principle next to several related rules:

• Meaning shown only by color (1.4.1, level A): meaning has to come through some other way too. Good contrast does not fix a red only error message. See the 1.4.1 guide.
• Interface parts and graphs (1.4.11, AA): 3:1 for field edges, meaningful icons, focus outlines and chart parts.
• Zoomed text (1.4.4, level AA): people who zoom still need the same colors to work at 200 percent. See the 1.4.4 guide.
• The enhanced rule (1.4.6, level AAA): the stricter version, 7:1 and 4.5:1.

The official explanations are in Understanding 1.4.3 Contrast (Minimum) and Understanding 1.4.6 Contrast (Enhanced) from W3C.

Who benefits from good contrast

Low vision affects a large share of people as they age, and many of them do not use any assistive technology. They simply read the screen. Strong contrast also helps people with some types of color blindness, people using a phone in bright sunlight, people on cheap or dim screens, and anyone tired at the end of the day. The 4.5:1 line was chosen to cover people with moderately low vision who do not use magnification, and 7:1 extends that to more severe loss.