WCAG Contrast Ratio Requirements

Color contrast is the single most common accessibility failure on the web. The WebAIM Million study consistently finds that over 80% of homepages have at least one WCAG contrast failure. Low contrast text is unreadable for people with low vision, color blindness, or anyone using a screen in bright sunlight.

WCAG (Web Content Accessibility Guidelines) defines specific contrast ratios that text and UI elements must meet. This guide explains what those ratios are, how to measure them, and how to fix failures.

What is Contrast Ratio?

Contrast ratio is the relative luminance difference between two colors. It ranges from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white).

The formula uses relative luminance (a perceptual measure, not raw brightness):

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the lighter color's relative luminance and L2 is the darker color's.

WCAG 2.1 Requirements

Level AA (Minimum)

Level AAA (Enhanced)

Most organizations target Level AA as the minimum standard. Level AAA is recommended for text-heavy content like articles and documentation.

What Counts as "Large Text"?

WCAG defines large text as:

• 18px (14pt) or larger at regular weight
• 14px (10.5pt) or larger at bold weight (700+)

CSS font-size: 18px meets the threshold for normal weight. For bold text, font-size: 14px; font-weight: 700 qualifies as large.

Common Contrast Failures

Light gray text on white

#999999 on #FFFFFF → 2.85:1 (FAILS AA)
#767676 on #FFFFFF → 4.54:1 (PASSES AA) ← minimum gray on white
#595959 on #FFFFFF → 7.0:1  (PASSES AAA)

#767676 is the lightest gray that passes AA on white. This is a useful reference point.

White text on colored backgrounds

#FFFFFF on #1E90FF (dodger blue) → 3.07:1 (FAILS for normal text)
#FFFFFF on #0066CC             → 4.84:1 (PASSES AA)
#FFFFFF on #004D99             → 7.08:1 (PASSES AAA)

Placeholder text

Placeholder text in form inputs is notoriously low contrast. The default browser placeholder color typically fails WCAG AA.

Disabled state colors

Disabled UI elements are exempt from contrast requirements under WCAG 2.1 (criterion 1.4.3 note: "Text that is part of an inactive user interface component" has no contrast requirement). However, making disabled elements distinguishable from enabled elements still improves usability.

How to Test Contrast

Browser DevTools

Chrome and Firefox DevTools show contrast ratios in the color picker. Open DevTools → Inspect an element → Click the color swatch → See the contrast ratio and WCAG compliance.

Automated tools

• axe DevTools (browser extension) — scans the entire page for contrast failures
• Lighthouse (built into Chrome) — includes contrast checks in the accessibility audit
• WAVE (web evaluation tool) — highlights contrast errors inline

Manual check

For custom graphics, gradients, or text on images, you need to check the specific foreground/background color combination. Use a contrast calculator that computes the ratio from two color values.

Fixing Contrast Issues

Strategy 1: Darken the text

The simplest fix is to make text darker. Going from #999 to #767676 on white fixes the most common failure with minimal visual change.

Strategy 2: Darken the background

For light text on colored backgrounds, darken the background until the ratio passes. Shift the hue toward a darker shade rather than adding black, which dulls the color.

Strategy 3: Increase font size or weight

Large text has a lower contrast threshold (3:1 vs 4.5:1). If a color combination fails at 16px, it may pass at 18px or at 14px bold.

Strategy 4: Add a text shadow or background overlay

For text over images, add a semi-transparent overlay between the image and text, or use text-shadow to create a contrasting halo.

Check Your Colors

StackCache Color & Contrast converts between Hex, RGB, HSL, and CMYK and checks WCAG contrast ratios for any color pair — all locally in your browser.