XQA
Back to Practice

Color Contrast

Color Contrast Practice

Practice testing WCAG color contrast requirements. Test tools should detect both passing and failing contrast ratios.

WCAG 2.1 Contrast Requirements

Level AA:
  • Normal text: 4.5:1
  • Large text: 3:1
Level AAA:
  • Normal text: 7:1
  • Large text: 4.5:1
UI Components:
  • Minimum: 3:1

Contrast Test Samples

Pass (Large Text)AAA

Sample text at this contrast level

Ratio: 5.74:1
Pass (Normal Text)AAA

Sample text at this contrast level

Ratio: 17.4:1
Fail (Low Contrast)Fail

Sample text at this contrast level

Ratio: 2.32:1
Pass (AA Only)AA

Sample text at this contrast level

Ratio: 4.6:1
Fail (UI Components)Fail

Sample text at this contrast level

Ratio: 1.43:1

Interactive Elements

Focus Indicators

Automation Tips

  • • Axe-core: Use axe-core library with Selenium/Playwright for automated a11y testing
  • • Data Attributes: Use data-contrast-ratio and data-passes for verification
  • • Color Extraction: Get computed styles with window.getComputedStyle()
  • • Contrast Calculation: Use WCAG contrast formula or libraries like polished.js