Q5 of 24 · Accessibility

What colour contrast ratios does WCAG AA require and how do you verify them?

AccessibilityJunioraccessibilitycolour-contrastwcag1.4.31.4.11tools

Short answer

Short answer: WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt/24px or 14pt/18.5px bold). UI components and graphical objects (icons, chart lines, focus indicators) also require 3:1 against adjacent colours. Verify with the browser DevTools colour picker, WebAIM Contrast Checker, or axe.

Detail

Contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker. A ratio of 1:1 is no contrast (same colour); 21:1 is maximum contrast (black on white).

The thresholds:

  • Normal text: 4.5:1 (success criterion 1.4.3, Level AA)
  • Large text (≥18pt or ≥14pt bold): 3:1 (same criterion)
  • UI components (button borders, input borders, focus rings, icons): 3:1 against adjacent colours (1.4.11, Level AA, added in WCAG 2.1)
  • Enhanced contrast (Level AAA): 7:1 for normal text, 4.5:1 for large text

Common testing mistakes: only checking text-on-background contrast and missing the UI component contrast requirement. An icon-only button with insufficient icon-to-background contrast fails 1.4.11 even if there's no text involved.

Tools:

  • Browser DevTools: Chrome's colour picker shows contrast ratio when you select a colour in the Styles pane with the accessibility panel open.
  • WebAIM Contrast Checker: paste hex codes and get the ratio instantly.
  • axe-core: catches contrast failures automatically in its automated scan, though it can't evaluate gradient backgrounds or images.
  • Colour Contrast Analyser (desktop app by TPGi): supports eyedropper for picking colours from any pixel on screen, including non-web contexts.

// WHAT INTERVIEWERS LOOK FOR

Knows both thresholds (4.5:1 and 3:1) and the boundary for large text. Knows UI component contrast is a separate criterion (1.4.11). Names at least one verification tool.

// COMMON PITFALL

Only knowing the 4.5:1 ratio and missing the 3:1 for large text and UI components. The UI component requirement (1.4.11) was added in WCAG 2.1 and is frequently overlooked.