# Color contrast — Web Accessibility (A11y)

Source: https://www.skillbyai.com/en/accessibility/a11y-color-contrast

> Meet WCAG colour contrast ratios, check them with tools and avoid relying on colour alone to convey meaning.

## WCAG contrast ratios

**AA (minimum for most sites)**: 4.5:1 for normal text, 3:1 for large text (18pt/24px or 14pt bold). **AAA (enhanced)**: 7:1 and 4.5:1. Never rely on colour alone to convey information; add text labels, patterns or icons.

## Test and tools

Use WebAIM Contrast Checker, Stark (Figma), or browser DevTools. Aim for 4.5:1 minimum. Test with Deuteranopia (red-green) and Protanopia (other red-green variant) simulators.

## Color blindness considerations

8% of males have red-green color blindness. Use patterns or text labels alongside color to convey status (pass/fail, error/success).

## AAA requirements

7:1 for normal text, 4.5:1 for large text. Rarely required but ideal for maximum accessibility.