Skip to content
WCAG Color Contrast Requirements Explained: AA vs AAA

WCAG Color Contrast Requirements Explained: AA vs AAA

4 min read

What Is Color Contrast in Web Accessibility?

Color contrast refers to the difference in luminance between foreground text and its background. When contrast is too low, text becomes difficult or impossible to read for people with low vision, color blindness, or anyone using a device in bright sunlight.

The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios that websites must meet to be considered accessible. See the WCAG 1.4.3 Contrast Minimum reference for the full success criterion. These ratios are calculated using a formula that compares the relative luminance of two colors on a scale from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white).

WCAG AA vs AAA: What’s the Difference?

WCAG defines two main conformance levels for contrast:

Level AA (Minimum)

Level AA is the standard that most accessibility laws and regulations reference. It requires:

  • Normal text (below 18pt regular or 14pt bold): Contrast ratio of at least 4.5:1
  • Large text (18pt regular or 14pt bold and above): Contrast ratio of at least 3:1
  • UI components and graphical objects: Contrast ratio of at least 3:1 against adjacent colors

Level AAA (Enhanced)

Level AAA provides the highest level of accessibility. It requires:

  • Normal text: Contrast ratio of at least 7:1
  • Large text: Contrast ratio of at least 4.5:1

WCAG itself notes that it is not always possible to meet Level AAA for all content on an entire site. However, aiming for AAA where feasible significantly improves readability for everyone.

How to Calculate Contrast Ratios

The contrast ratio formula uses relative luminance values of the two colors:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. Luminance is calculated from the sRGB color values using a linearization step followed by a weighted sum based on human perception of red, green, and blue.

You do not need to calculate this manually. Use a free color contrast checker to instantly see whether your color combination passes AA, AAA, or both for normal and large text.

Common Contrast Failures

Light Gray Text on White

One of the most frequent violations is using light gray text (#999 or lighter) on a white background. The popular combination of #999999 on #FFFFFF yields a contrast ratio of only 2.85:1, which fails both AA and AAA for normal text.

Placeholder Text

Form field placeholders are notoriously low-contrast. The default browser placeholder color is often too light to meet WCAG standards. Always ensure placeholder text meets the 4.5:1 ratio, or provide visible labels above the field instead.

Colored Buttons

Buttons with white text on bright colored backgrounds often fail contrast checks. For example, white text (#FFFFFF) on a medium blue (#4A90D9) has a ratio of only 3.11:1, which fails AA for normal text. Use a darker shade of the brand color or ensure the text is large enough to qualify as “large text.”

Text Over Images

Text placed over photographs or gradients often has inconsistent contrast. Use a semi-transparent overlay between the image and text to guarantee a minimum contrast level regardless of the image content.

Practical Tips for Designers

  1. Test early — Check contrast during the design phase, not after development. Fixing colors in Figma is far easier than refactoring CSS.
  2. Build a compliant palette — Create a set of approved foreground and background color pairs that all meet AA standards. Document them in your design system.
  3. Don’t rely on color alone — Combine color with text labels, icons, or patterns to convey meaning. This helps users who are colorblind.
  4. Check interactive states — Focus outlines, hover states, and disabled states all need sufficient contrast.
  5. Test on real devices — Screen brightness, ambient light, and display quality all affect perceived contrast.

Tools for Testing Contrast

Several free tools can help you verify contrast compliance:

  • wcagkit Color Contrast Checker — Paste hex codes and instantly see AA and AAA results for normal and large text. Runs entirely in your browser with no data sent to any server.
  • Browser DevTools — Chrome, Firefox, and Edge all include built-in contrast checkers in their element inspector.
  • Figma plugins — Multiple accessibility plugins can audit an entire design file for contrast issues.

Beyond the Ratio

Meeting the mathematical contrast ratio is necessary but not sufficient. Consider readability factors like font weight (thin fonts are harder to read at low contrast), font size, line spacing, and the cognitive load of your content. A technically compliant 4.5:1 ratio with a thin 300-weight font at 14px can still be difficult to read.

Aim for AA as your minimum and AAA where possible. Your users, whether they have a permanent disability, a situational impairment like screen glare, or simply aging eyes, will thank you for it. Try the wcagkit contrast checker to audit your current color palette today.