WCAG Contrast Ratio Explained: What 4.5:1, 3:1 and 7:1 Mean

Grey text on a white background can look calm and refined on a well-calibrated monitor. On a budget laptop in a sunny kitchen, or for a reader with low vision, the same line can fade almost into the page.

The WCAG contrast ratio exists to close that gap. It turns a fuzzy question, “is this readable?”, into a number you can check before anything ships.

Below is what that number measures, where the 4.5:1, 3:1 and 7:1 thresholds come from, and how to work with them without draining the life out of a brand palette.

What a contrast ratio actually measures

The plain meaning of a contrast ratio is this: how much brighter the lighter of two colors is than the darker one. Hue does not enter the sum directly. Only luminance does.

WCAG works with relative luminance, a value from 0 for the darkest black to 1 for the brightest white. Each sRGB channel is converted to a linear value and then weighted. Green counts for about 71.5 percent, red for 21.3 percent and blue for only 7.2 percent.

The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two colors. The result runs from 1:1, two identical colors, up to 21:1, pure black on pure white.

That weighting explains some surprises. Pure yellow and pure blue are both fully saturated, yet yellow text on white scores about 1.07:1 while blue on white scores about 8.6:1. To the eye, yellow is almost as bright as white, so there is very little difference left to read.

The WCAG AA contrast ratio: 4.5:1 and 3:1

Level AA is the target most organizations aim for, so these are the numbers worth knowing by heart. Success Criterion 1.4.3, Contrast (Minimum), sets them out.

Ordinary text needs a 4.5:1 contrast ratio against its background. That covers body copy, labels, captions, link text and the small footer print that tends to get the least attention.

Large text gets a lower bar of 3:1, because bigger letterforms stay legible with less contrast. WCAG treats text as large at 18 point, or 14 point when bold. In CSS that works out to roughly 24px regular or 18.7px bold.

The 3:1 contrast ratio appears again in Success Criterion 1.4.11, Non-text Contrast, added in WCAG 2.1. It covers the visual parts of interface components and meaningful graphics: input borders, checkbox outlines, focus indicators, icons that carry meaning, and the bars and lines in a chart.

The criteria are just as clear about what they leave out. Logos and logotypes are exempt, as is purely decorative text, text in genuinely inactive controls, and text that happens to appear in a photograph. Brand guidelines on their own are not an exemption.

What 4.5:1 looks like in real colors

The thresholds make more sense with actual hex codes. Grey #767676 on white measures about 4.54:1 and passes. Move one step lighter to #777777 and it drops to about 4.48:1, which fails.

That small gap matters because the limits are hard limits. W3C’s explanation of 1.4.3 states that computed values should not be rounded, so a pair that measures 4.499:1 does not meet 4.5:1.

Bright brand colors are where most palettes get caught. White text on pure red #FF0000 sits at about 4.0:1, which is fine for a big heading but not for a 16px button label.

Orange is trickier still. White text on #FF6600 comes in at about 2.9:1, so it fails even at heading size, while black text on the same orange reaches about 7.2:1.

At the darker end, #595959 on white reaches about 7.0:1 and #333333 lands near 12.6:1. A dark grey like that is a popular choice for body text, because it feels a little softer than pure black while sitting well clear of the limit.

When to aim for 7:1

Success Criterion 1.4.6, Contrast (Enhanced), is the AAA version. It raises the requirement to 7:1 for normal text and 4.5:1 for large text.

W3C does not recommend requiring AAA conformance across whole sites, since some content cannot meet every AAA criterion. Still, 7:1 is a sensible goal for long reading, for services used by older audiences, and for pages likely to be read outdoors or on dim screens.

A workable middle ground is to hold body text to 7:1 and let large headings, tags and secondary labels sit at AA. Readers get the extra margin where they spend the most time.

Where contrast checks usually go wrong

Most failures are not in the main text color, which teams tend to check. They hide in the places that only show up in certain states or on certain backgrounds.

Text on photos is the classic case. A hero headline can pass over the dark half of an image and fail over a bright sky a few hundred pixels further along. Test the lightest area behind the letters, or add a solid or semi-transparent overlay so the result no longer depends on the photo.

Interaction states count too. Placeholder text, hover colors and text that appears on keyboard focus all fall under 1.4.3, and a pale grey placeholder is an easy one to miss.

Buttons that only look disabled are another trap. The exemption applies to controls that are genuinely inactive, so a faded grey submit button that still works needs full contrast.

Transparency and gradients change the effective color from one spot to the next. Measure the blended result where the text actually sits, and judge the pair by its weakest point.

Contrast also says nothing about whether two colors can be told apart by someone with color vision deficiency. That is a separate problem, which we explore in our guide to colorblind-friendly trading charts.

A quick way to check a palette

Contrast is easiest to fix while a palette is still being chosen, long before a design system is built on top of it. List every text color, pair it with every background it might sit on, and note the ratio for each pair.

The free Color Palette Extractor on succodesign.it covers both halves of that job. Upload a brand photo or mood board and it pulls out the dominant colors as HEX, RGB and HSL values, then lets you check the WCAG contrast ratio between any two of them against the AA and AAA thresholds.

The analysis runs locally in your browser, so the image is not sent to a server. That makes it practical for client material you would rather not upload anywhere.

When a pair fails, adjust lightness before hue. Darkening a brand blue by a few steps, or keeping the original shade for large display type only, usually leaves the identity intact.

Dark mode deserves its own pass rather than a quick inversion, a point covered in our piece on color theory for web designers. Colors that pass on white can behave quite differently on near-black surfaces.

Contrast is one part of a larger picture

The formula is a model, not a full description of how people perceive text. A thin, light font weight can feel faint even when its color pair passes, so it is worth looking at real type at real sizes, not just the number.

WCAG 3.0 is still a Working Draft, while WCAG 2.2 has been a W3C Recommendation since December 2024. For now, the 2.x ratios are the ones to design against.

Contrast also sits alongside keyboard access, alt text, semantic markup and motion settings. If you want the wider view, our practical accessibility checklist walks through those habits one by one.

Keep three numbers within reach: 4.5:1 for ordinary text, 3:1 for large text and interface parts, and 7:1 when you want reading to feel effortless. Check them on the colors you will actually ship, in every state, and the repaint at the end of a project rarely has to happen.