Skip to Main

Color Accessibility Matrix

Style Guide

Color Accessibility Matrix

Validate background and text combinations against WCAG standards to ensure your website’s color palette is accessible to all users.

Color PaletteDocumentation

ACSS Color Palette Accessibility Checker

Review WCAG contrast ratings for ACSS global colors, including optional semantic colors and shade comparisons.

Color Combination Matrix

Color Opacity Matrix

Understanding Contrast & Accessibility

Contrast Ratios

  • 7.00 + Enhanced contrast suitable for all text sizes
  • 4.50 – 6.99 Good contrast suitable for standard text
  • 3.00 – 4.49 Minimum contrast, suitable ONLY for large scale text
  • < 3.00 Insufficient contrast

WCAG Ratings

  • AAA Enhanced accessibility (ratio 7.00+)
  • AA Good accessibility (ratio 4.50+)
  • ! Only suitable for large scale text (ratio 3.00+)
  • Fail Insufficient contrast (ratio < 3.00)
*Large text is defined as bold and 14 point (typically 18.66px/1.167em) or larger, OR not bold and 18 point (typically 24px/1.5em) or larger.