color-contrast-and-accessibility

name	color-contrast-and-accessibility
description	Use when checking color contrast for WCAG AA or AAA compliance. Contrast is not optional.

Color Contrast and Accessibility

Minimum 4.5:1 (AA) for body text, 3:1 (AA Large) for large text. 7:1 for AAA. Test every color combination.

Contrast standards

Standard	Body text	Large text	UI components
WCAG AA	4.5:1	3.0:1	3.0:1
WCAG AAA	7.0:1	4.5:1	n/a
Best practice	7.0:1	5.0:1	4.5:1

Testing tools

1. Chrome DevTools accessibility audit
2. WebAIM contrast checker (free online)
3. Stark plugin (Figma, browser)
4. axe DevTools (free)
5. Lighthouse (built into Chrome DevTools)

Common contrast failures

1. Brand accent on cream — often <4.5:1, fails
2. Placeholder text on cream — usually fails
3. Disabled button text — often fails AAA
4. Caption text at 60% opacity — borderline 4.5:1
5. Light grey body text — fails AA on bright backgrounds

Where this fits in the X3 empire

Pre-launch accessibility check for every CardPrepAI page.