← Back to Accessalyze

WCAG Color Contrast Requirements Explained

Color contrast failures are the single most common WCAG violation — present on roughly 83% of audited websites according to the WebAIM Million report. Most of these are easy to fix once you understand the rules.

The Contrast Ratio Requirements

Common Failing Color Combinations

These color pairs look fine to many designers but fail WCAG:

How to Calculate a Contrast Ratio

The ratio is calculated from the relative luminance of the two colors:

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

Where L1 = lighter color luminance, L2 = darker color luminance.
Luminance = 0.2126*R + 0.7152*G + 0.0722*B
(each channel linearized from sRGB)

You don't need to do this math manually. Use these free tools:

• Accessalyze — scans every color combination on a real page
• WebAIM Contrast Checker — enter two hex values manually
• Colour Contrast Analyser — desktop app, sample colors from your screen
• Chrome DevTools — hover over a color in the inspector to see its contrast ratio

Fixing Contrast Failures in CSS

Body text too light

/* FAIL — gray-400 on white is only 2.85:1 */
p { color: #9ca3af; }

/* PASS — gray-700 on white is 8.59:1 */
p { color: #374151; }

Blue links on white

/* FAIL — blue-500 on white is 3.35:1 */
a { color: #3b82f6; }

/* PASS — blue-700 on white is 7.27:1 */
a { color: #1d4ed8; }

Button text on colored background

/* FAIL — white text on green-400 is 2.7:1 */
.btn { background: #4ade80; color: #fff; }

/* PASS — white text on green-700 is 5.74:1 */
.btn { background: #15803d; color: #fff; }

Placeholder text in inputs

/* FAIL — #9ca3af placeholder on white is 2.85:1 */
::placeholder { color: #9ca3af; }

/* PASS — #6b7280 placeholder on white is 4.54:1 */
::placeholder { color: #6b7280; }

UI Component Contrast (WCAG 1.4.11)

Added in WCAG 2.1, this criterion requires that the visual boundary of UI components — the border of a text input, the outline of a checkbox, the border of a button — has at least 3:1 contrast against the adjacent background.

/* FAIL — light gray border on white */
input { border: 1px solid #d1d5db; }

/* PASS — darker border meets 3:1 against white */
input { border: 1px solid #6b7280; }

Focus Indicator Contrast

The focus ring around a focused element must also meet 3:1. Many sites use outline: none entirely — this is a WCAG 2.4.7 failure and also an 1.4.11 failure.

/* FAIL — removes focus ring entirely */
:focus { outline: none; }

/* PASS — custom high-contrast focus ring */
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

← Back to Accessalyze · Next: How to Fix Color Contrast Issues in CSS →