Color Contrast

Accessibilitybeginneraka Contrast Ratio

// Definition

The difference in perceived luminance between a foreground colour (typically text or an icon) and its background, expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white). WCAG 2.1 Level AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) and for UI component boundaries. QA testers verify contrast using browser DevTools, the axe extension, or dedicated contrast-checking tools; failing contrast is one of the most common and automatable accessibility defects.

// Why it matters

Contrast is the ratio between text and its background; too low and low-vision users (and anyone in sunlight) can't read it. It's the most common WCAG failure and the easiest to test objectively — WCAG AA requires 4.5:1 for normal text, 3:1 for large. QA can catch most of these automatically, which makes missing them inexcusable.

// How to test

// axe flags contrast failures automatically
cy.injectAxe()
cy.checkA11y(null, { runOnly: ['cat.color'] })
// For a specific element, assert the computed ratio:
cy.get('[data-cy=cta]').then(($el) => {
  // compute ratio from color + background-color (helper)
  expect(contrastRatio($el)).to.be.gte(4.5) // AA normal text
})

// Common mistakes

  • Checking text-on-solid but missing text over images/gradients
  • Forgetting hover/focus/disabled states have their own contrast
  • Passing placeholder text that's too faint (it's still text)

// Related terms