WCAG Color Contrast Requirements: Complete Guide with Examples

16 de maio de 2026 · EAAPass Team color contrast wcag contrast accessibility design contrast ratio wcag 1.4.3 visual accessibility

Why Color Contrast Matters for Accessibility

Color contrast is one of the most common accessibility issues on the web. According to the WebAIM Million study, which annually analyzes the top one million websites, low contrast text is consistently the most detected WCAG failure, appearing on over 80% of homepages tested. Poor contrast makes text difficult or impossible to read for people with low vision, color blindness, or anyone viewing a screen in bright sunlight.

The good news is that contrast issues are also among the easiest accessibility problems to fix. This guide covers everything you need to know about WCAG contrast requirements, including the specific ratios required, how to test them, and practical examples of compliant and non-compliant color combinations.

WCAG Contrast Success Criteria

WCAG 2.1 includes three success criteria related to contrast:

1.4.3 Contrast (Minimum) — Level AA

This is the primary contrast requirement for Level AA compliance. It applies to text and images of text:

Normal text: Contrast ratio of at least 4.5:1
Large text: Contrast ratio of at least 3:1
Incidental text: Text that is part of a decorative image, inactive UI component, or invisible to users has no contrast requirement
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement

What Qualifies as Large Text?

Large text is defined as:

18pt (24px) or larger for regular weight text
14pt (approximately 18.66px) or larger for bold text (700+ font weight)

1.4.11 Non-text Contrast — Level AA (New in WCAG 2.1)

This criterion extends contrast requirements beyond text to user interface components and graphical objects:

UI components: Visual boundaries of form inputs, buttons, and other interactive elements must have a contrast ratio of at least 3:1 against adjacent colors
States: Focus indicators, selection states, and other visual states must also meet the 3:1 ratio
Graphical objects: Parts of graphics required to understand the content must meet 3:1 contrast (e.g., lines in a chart, icons conveying meaning)

1.4.6 Contrast (Enhanced) — Level AAA

For those aiming for Level AAA (not required by the EAA but considered best practice):

Normal text: 7:1 contrast ratio
Large text: 4.5:1 contrast ratio

Understanding Contrast Ratios

A contrast ratio is a mathematical comparison of the relative luminance of two colors. The ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white).

The formula for relative luminance considers how human eyes perceive different colors. We are most sensitive to green, then red, then blue. The formula accounts for this by weighting the color channels differently:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Where R, G, and B are the linearized values of the red, green, and blue channels.

Common Contrast Mistakes

Light Gray Text on White Backgrounds

This is perhaps the most common contrast failure. Light gray text (#999999) on a white background (#FFFFFF) has a contrast ratio of only 2.85:1, failing both normal text (4.5:1) and large text (3:1) requirements. To fix this, darken the text to at least #767676 for normal text (4.54:1) or #959595 for large text (3.03:1).

Placeholder Text

Form placeholder text is notoriously low contrast. The default browser styling for placeholder text often fails WCAG requirements. While placeholder text is not technically required to meet contrast ratios (it is considered "incidental" by some interpretations), it is best practice to ensure it is readable. Use CSS to style placeholder text with sufficient contrast.

Text Over Images

Text placed over photographs or gradients can have varying contrast depending on the image content. Solutions include adding a semi-transparent background overlay behind the text, using a solid background strip, or ensuring the image area under text has consistent darkness or lightness.

Colored Buttons

Buttons with colored backgrounds need to ensure contrast for both the button text and the button boundary. A blue button (#0066CC) with white text (#FFFFFF) has a contrast ratio of 5.74:1 for the text, which passes. But the button boundary also needs 3:1 contrast against its surrounding background under criterion 1.4.11.

How to Test Color Contrast

Automated Testing

The fastest way to find contrast issues across your entire website is to use an automated tool. EAAPass scans your pages and identifies all instances where text or UI components fail to meet WCAG contrast requirements, along with specific color values and suggestions for compliant alternatives.

Browser Extensions

Several browser extensions let you check contrast on individual elements:

WAVE: Highlights contrast errors directly on the page
axe DevTools: Reports contrast issues in the developer console
Color Contrast Analyzer: Allows picking any two colors to check their ratio

Design Tool Plugins

Check contrast during the design phase using plugins for Figma, Sketch, and Adobe XD. This is the most efficient approach — catching issues before they reach code.

Choosing Accessible Color Palettes

Here are some guidelines for building color palettes that support accessibility:

Start with contrast: When choosing your brand colors, verify that your primary text color and background color meet 4.5:1 for body text.
Test all combinations: If your palette has five colors, test every possible foreground/background combination. Not all combinations need to pass, but you need to know which ones do.
Document accessible pairings: Create a reference chart showing which color combinations in your palette are accessible for text, large text, and UI components.
Consider dark mode: If you offer a dark mode, verify contrast ratios in that context as well. Colors that pass on a white background may not pass on a dark background.

Fixing Contrast Issues

When you find contrast failures, here are your options:

Darken the text: Often the simplest fix. Move the text color darker while staying within your brand guidelines.
Lighten the background: If the text color is constrained, make the background lighter.
Increase text size: If you can make text 18pt (24px) or 14pt bold (18.66px), the requirement drops from 4.5:1 to 3:1.
Add a background behind text: For text over images, add a semi-transparent overlay.
Redesign the element: Sometimes the best solution is to rethink the design approach entirely.

Start Checking Your Contrast Today

Color contrast is one of the most impactful accessibility improvements you can make. It affects the largest number of users and is relatively straightforward to fix. Run your website through EAAPass to identify every contrast issue in one comprehensive scan, then work through the fixes systematically. Get your free accessibility audit now.