Color Accessibility (WCAG)

Color accessibility ensures content is usable by everyone, regardless of visual abilities.

WCAG requirements

• Contrast ratios:
  • Normal text: 4.5:1 minimum (AA), 7:1 enhanced (AAA)
  • Large text (18pt+): 3:1 minimum (AA), 4.5:1 enhanced (AAA)
  • UI components: 3:1 minimum

Color blindness types

• Protanopia: Red-blind (1% of men).
• Deuteranopia: Green-blind (most common, 6% of men).
• Tritanopia: Blue-blind (rare, <1%).
• Achromatopsia: Total color blindness (very rare).

Best practices

• Never use color alone to convey information.
• Add patterns, icons, or text labels.
• Test with color blindness simulators.
• Provide high-contrast mode.
• Use accessible color palettes.

Tools

• Contrast checkers (WebAIM, Stark).
• Color blindness simulators.
• Browser dev tools (Chrome, Firefox).