Developer guide

Color Contrast Accessibility Checklist

Use a practical pre-release checklist for text, controls, states, and imagery.

Short answer

A useful color-contrast review checks real components and states, not just a single palette sheet.

When this applies

Contrast is one accessibility requirement among many. Passing a ratio does not replace testing labels, keyboard focus, text size, or meaning conveyed by color.

Practical review steps

  1. Check normal and large text using the appropriate threshold.
  2. Check controls, icons, focus indicators, and state changes in context.
  3. Record approved pairs as design tokens and retest them before release.

Check the actual color pair

Use the free Contrast Check with the foreground and background colors from the real component. It provides an immediate AA and AAA ratio check in the current browser tab.

Source and limit

For the formal requirement, review W3C's WCAG contrast minimum guidance. A ratio result checks a color pair; it is not a complete accessibility audit.