# Color Contrast Review Checklist

Use this free checklist before handing off a color palette or UI screen.

## Text Contrast

- Body text passes WCAG AA against its background.
- Small muted text is tested separately from normal body text.
- Large display text still has enough contrast in the actual layout.
- Link color is distinguishable from body text and has a non-color cue.
- Disabled text is visibly disabled without becoming unreadable.

## UI Components

- Primary, secondary, and destructive buttons are tested in default, hover, focus, and disabled states.
- Form inputs have visible borders or backgrounds.
- Focus states are visible on light and dark backgrounds.
- Error, warning, success, and info states are not color-only.
- Icons that communicate meaning have enough contrast.

## Palette Handoff

- Each color has a role name, not only a hex value.
- Text colors are paired with allowed background colors.
- Brand accent colors are tested before being used for text.
- Dark mode variants are tested separately.
- The final palette is exported as CSS variables or design tokens.

Use `/tools/contrast-checker/` for single pairs and `/tools/color-accessibility-auditor/` for palette audits.