Blog · Accessibility

WCAG Color Requirements

Complete reference to WCAG 2.2 color contrast requirements — AA and AAA thresholds for text and non-text elements, with the exact formula.

Published November 15, 2026 · 8 min read

Overview

The Web Content Accessibility Guidelines (WCAG) 2.2 define specific color contrast requirements to ensure text and interface components are readable by everyone, including users with low vision and color vision deficiency.

This article is a complete reference to those requirements, including the exact success criteria numbers and formulas.

Success Criterion 1.4.3 — Contrast (Minimum), Level AA

This is the baseline requirement most websites should meet:

  • Normal text: at least 4.5:1 contrast ratio
  • Large text: at least 3:1 contrast ratio

"Large text" is defined as 18pt (24 CSS px) or 14pt (18.66 CSS px) bold or larger.

Success Criterion 1.4.6 — Contrast (Enhanced), Level AAA

The stricter enhanced requirement:

  • Normal text: at least 7:1 contrast ratio
  • Large text: at least 4.5:1 contrast ratio

AAA is often required for government, healthcare and education content, but is optional for most sites.

Success Criterion 1.4.11 — Non-Text Contrast, Level AA

Non-text elements that users need to understand content also require contrast:

  • UI components: at least 3:1 against adjacent colors
  • Graphical objects essential to understanding content: at least 3:1

This covers form field borders, focus indicators, icons that convey meaning, and chart elements.

The Exact Contrast Ratio Formula

The WCAG 2.2 contrast ratio is computed from the relative luminance of two colors:

For each channel c in {R, G, B}:
  c' = c / 255
  if c' ≤ 0.03928: c'' = c' / 12.92
  else: c'' = ((c' + 0.055) / 1.055) ^ 2.4

Relative luminance L = 0.2126 × R'' + 0.7152 × G'' + 0.0722 × B''

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 is the lighter color's luminance
and L2 is the darker color's luminance.

This formula is exact — there is no "close enough." Our Contrast Checker implements it precisely.

Common Combinations and Their Ratios

Foreground Background Ratio Result
#000000#FFFFFF21.00AAA
#15243B#FFFFFF14.32AAA
#155EEF#FFFFFF3.86AA Large only
#7A8699#FFFFFF3.93AA Large only
#AAAAAA#FFFFFF2.32Fail

Common Mistakes

  • Using brand color for body text: brand colors are optimized for logos, not readability. Use a dark neutral for body text.
  • Light gray placeholder text: placeholder text often fails AA. Use at least #757575 on white.
  • Assuming large text is safe at 3:1: AAA requires 4.5:1 even for large text.
  • Testing on one display: contrast looks different on a bright monitor versus a phone in sunlight. Meet the standard, do not eyeball it.

Frequently Asked Questions

Related Resources