Color contrast and WCAG: the ratios you need and how to fix low contrast

The requirements

These come from WCAG 2.2. The ratio compares the brightness of two colors on a scale from 1 to 1 (no difference) to 21 to 1 (black on white).

How to test

1. Find the exact text and background colors, from your design file or the browser's inspect tool.
2. Enter them in a contrast checker such as the WebAIM Contrast Checker.
3. Read the ratio and compare it with the table above.
4. Test hover, focus, disabled and error states too, not just the default.

Typical failures and fixes

Light gray body text

Pale gray looks refined and fails often. On a white background the lightest gray that passes 4.5 to 1 is #767676; #777777 falls just short.

/* Before: #999999 on white is about 2.8 to 1 (fails) */
.meta { color: #999999; background: #ffffff; }

/* After: #595959 on white is about 7 to 1 (passes) */
.meta { color: #595959; background: #ffffff; }

Text over a photo

A busy image changes contrast from one spot to the next. Put a solid or semi-opaque layer behind the text, or move the text off the image.

.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.hero h1, .hero p { position: relative; color: #ffffff; }

Always measure the result at the lightest part of the image under the text.

Buttons and form fields

White text on a pale blue button is a common fail. Also check the border of an input: a light gray outline around a white field often falls below 3 to 1, which makes the field hard to see.

Color alone

WCAG 1.4.1 also asks that color is never the only way to convey meaning. Mark required fields with text or an icon as well as red, and underline links within paragraphs.

What the ratio actually measures

Contrast ratio compares the brightness of two colors, from 1 to 1 (identical) to 21 to 1 (black on white). It is calculated from the relative luminance of each color, which accounts for how the human eye perceives red, green and blue differently. You do not need to do the math yourself, because any contrast checker will do it. What matters is the target: 4.5 to 1 for normal text, 3 to 1 for large text and for the visual parts of controls.

Large text means roughly 24 pixels or more, or about 19 pixels or more if bold. Many designs use text smaller than that, so assume the 4.5 to 1 rule applies unless you know otherwise.

Who benefits from good contrast

• People with low vision, who may not be able to read faint text at all.
• People with some color vision deficiencies, who may see two colors as almost the same.
• Older adults, whose eyes often need more contrast.
• Anyone using a phone in bright sunlight, or an old monitor.
• Anyone who is tired, ill or in a hurry.

Four contrast rules, in order of how often they are missed

Exceptions you may rely on

The standard excludes a few things. Logos and brand names are exempt. Text that is purely decorative is exempt. Inactive controls, such as a disabled button, are exempt, though it is kinder to keep them readable. Text that is part of a picture and has no purpose in conveying information is exempt. Be careful with this last one: if the text carries information, the rule applies.

Fixing low contrast, step by step

1. Collect your brand colors and list every text-and-background pair your site uses.
2. Test each pair with a contrast checker and mark which fail.
3. For each failure, darken the text or lighten the background until the ratio passes. Often a small change is enough.
4. If a brand color is too light for text, use it for large decorative areas and use a darker shade for text and buttons.
5. Test states: hover, focus, visited, disabled and error.
6. Write the approved pairs into your style guide so designers and editors use them.

Text over images and gradients

Scanners cannot measure text over a photo reliably, because the background changes behind each letter. Test it yourself. Place a solid or semi-transparent layer behind the text, choose images with calm areas for text, or move the text off the image. Check the result at desktop and phone sizes, since the crop of a photo changes and so does what sits behind the words.

Dark mode and themes

If your site offers a dark theme, test it separately. A pair that passes in light mode may fail in dark mode, and the reverse. Pay attention to links, borders and focus indicators, which are often tuned for one mode only.

Common mistakes

• Testing only the headline and not the small print.
• Using a light grey for placeholder text and treating it as decoration.
• Passing the check for text, then forgetting the border of the form field.
• Relying on a color name instead of measuring the actual value.
• Changing a theme color without retesting every component that uses it.

Some real numbers to calibrate your eye

It is hard to judge contrast by looking, especially on a good monitor. These examples are all text on a white background and give you a feel for the boundaries.

A common surprise is that popular light greys and bright accent colors fail. Designers often choose them for a soft feel, and the fix is small: darken the text a few steps.

Fixing a brand palette without rebranding

1. Keep the brand colors for logos, backgrounds, illustrations and large display text where contrast is less strict.
2. Derive a darker shade of each brand color for small text and buttons. A darker version of the same hue still feels like the brand.
3. Derive a lighter tint for backgrounds, and place dark text on it.
4. Document the pairs in your style guide, with the ratio for each.
5. Review new campaigns against the guide before they go live.

Buttons, links and form fields

Buttons need contrast in two places: the label against the button fill, and the button against the page, unless the label itself shows where the button is. A white label on a pale blue button is a typical failure. Links in running text should be distinguishable by more than color, so underlines are a safe default. Form fields need a border or background that meets 3 to 1 against the page, because without a visible boundary people cannot tell where to click. See form labels.

States people forget

• Hover and focus: the changed color should still pass.
• Visited links: a faded purple on a dark background is a classic failure.
• Disabled controls: exempt, but still readable if people need to understand what is unavailable.
• Error and success messages: pale green on white is common and hard to read.
• Placeholder text: often the lightest text on the whole page.
• Charts: lines and bars that rely only on color to be told apart.

Tools worth using

Browser developer tools show the contrast ratio when you inspect a text element, and many design tools have built-in checks or plugins. Standalone contrast checkers let you enter two colors and see the result instantly. For a whole page, use a scanner for plain text and then check images, gradients and states by hand. See free accessibility checkers compared.

How to explain contrast to a designer or client

Resistance to contrast fixes often comes from the worry that the design will look heavy. A practical way to answer is to show a side-by-side with a small adjustment. A shift from light grey to a slightly darker grey usually looks nearly identical on a designer's monitor and is much easier to read on a laptop in a bright room. Framing the change as readability for customers, not as compliance, keeps the conversation useful.

A worked example: fixing a product card

A product card has a white background, a title in dark grey, a price in light grey, a "Sale" label in white on bright orange and a button in white on pale teal. The scanner reports three failures. The price is about 2.7 to 1 and needs darkening to at least #767676, though a darker value such as #595959 reads better. The sale label fails at roughly 2.9 to 1, so the team switches to a deeper orange-red with white text, or dark text on the orange. The button fails too; darkening the teal until the white label reaches 4.5 to 1 solves it without changing the hue. Total time: about twenty minutes, and every product card on the site is fixed because they share one style.

Contrast for people with color vision deficiency

About one in twelve men and one in two hundred women have some form of color vision deficiency. Red and green are the most commonly confused pair. This is why WCAG asks that color not be the only way to show meaning. A form that marks errors only in red, a chart that distinguishes lines only by green and red, or a stock indicator that uses a green dot and a red dot with no words will fail these users. Add text, icons, patterns or labels.

Contrast ratio and color blindness are separate topics. A pair can have enough luminance contrast and still be indistinguishable to someone who confuses the hues, which is why you should never use color alone.

Questions people ask about contrast

• Does the rule apply to text in images? Yes, if the text carries information. Logos and purely decorative text are exempt.
• What about large headings in light colors? Large text only needs 3 to 1, which gives designers more freedom for display type. Still, test it, since very thin fonts are hard to read even when the ratio passes.
• Do I need to check every page? Check your style, not every page. If the pairs in your design system pass, pages built from them pass. Test content with custom colors separately.
• Is a dark theme automatically better? Not necessarily. Light text on a dark background can pass easily, but pure white on pure black can cause glare for some readers. A very dark grey with an off-white text is often more comfortable.

If you only do one thing, check your body text, your links and your buttons. These make up most of what a visitor reads and clicks.

How Clir reports contrast

Clir's report flags contrast findings with the measured ratio, the colors involved and the element, so the fix is a specific value to change. It cannot measure text placed over images reliably in every case, so those can appear as items to review. See the methodology.