Contrast Ratios, Stated Plainly: 4.5 to 1 and Where It Applies

Light gray text on a white background is the most common accessibility failure on the web, and it is also the most measurable. WCAG Success Criterion 1.4.3 puts a number on it: 4.5 to 1 for normal text, 3 to 1 for large text. Measure it, and the argument ends.

The numbers, and what they cover

Success Criterion 1.4.3, Contrast (Minimum), is Level AA, and it covers text and images of text. Normal text needs a contrast ratio of at least 4.5 to 1 against its background. Large text, defined as 18 point or 14 point bold and larger, needs 3 to 1. The ratio is a luminance calculation, not an opinion about taste, and a checker like WebAIM's contrast tool returns the number in a second.

A second criterion covers everything that is not text. Success Criterion 1.4.11, Non-text Contrast, also Level AA, requires 3 to 1 for user interface components and meaningful graphics: the border of a text field, the outline of a checkbox, the icon that shows whether a toggle is on. A form field whose border is barely visible against the page fails 1.4.11 even if its label text passes 1.4.3.

There are exemptions, and teams should know them before they argue. Logos are exempt from 1.4.3. Disabled controls are exempt, since a grayed-out button is communicating that it cannot be used. Incidental text, like a watermark, is exempt. Placeholder text is not exempt in practice, because it is text the user has to read, and placeholder gray is where most sites quietly fail.

Where sites actually fail

Body text is the first place to look. A medium gray, something like #767676 on white, passes at 4.5 to 1 only barely, and anything lighter fails. Design systems that set body text to a light gray for aesthetic reasons fail on every page at once, and the fix is one variable in the theme. Darken the text, not the background, and the whole site passes. Related reading: Making Your Shopify Cart Drawer Keyboard Accessible.

Text over images is the second. A white headline over a bright photograph fails whenever the photograph is light behind the words, and it passes or fails depending on which image loads, which makes it a failure that comes and goes. The fix is a scrim, a solid overlay behind the text, or a darker image treatment, applied in the component so no author can break it by uploading a bright photo.

Links inside body text are the third, and the subtlest. A link that differs from surrounding text only by color fails 1.4.1, Use of Color, unless it also has an underline or another non-color cue. The fix is an underline on links in body copy, which is also the convention readers expect. A design that removes link underlines for cleanliness is trading readability for tidiness, and losing.

How to check it

Run the checker on the theme's text colors, not on individual pages. List every text color and background pairing in the design system, run each through the ratio tool, and fix the pairs that fall short. Then check the real pages for text over images, because the theme variables cannot catch those. The whole pass takes an afternoon, and the result is a number, which is the easiest kind of finding to defend. More on this: Accessible Gift Card Balance Checkers: A Small Page With Every Problem.

Frequently asked questions

Is placeholder text held to 4.5 to 1?

Placeholder text is text users must read, so it should meet the ratio. The safer practice is to not rely on placeholders as labels at all, and give every field a real label.

Does large text really get 3 to 1?

Yes. Text at 18 point, or 14 point bold, and larger needs only 3 to 1 under 1.4.3, because larger glyphs are easier to read at lower contrast.

What about logos and brand marks?

Logos are exempt from 1.4.3. The exemption covers the logo itself, not the navigation text or tagline sitting next to it.

Do I measure contrast against the background or the image behind it?

Against whatever is actually behind the text. Text over a photograph must be measured against the lightest part of the photograph behind the words, which is why a scrim or overlay is the reliable fix.