/check-contrast - Check Color Contrast
Check color contrast ratios against WCAG accessibility requirements.
Steps
- Scan CSS, SCSS, and styled-components for all text color and background color pairs
- Resolve CSS custom properties and theme variables to actual color values
- Calculate the luminance contrast ratio for each foreground/background pair
- Check against WCAG 2.1 requirements: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
- Check non-text contrast for UI components and graphical objects: 3:1 ratio
- Identify text on images or gradients that may have insufficient contrast
- Check focus indicator contrast against adjacent colors
- Verify contrast in both light and dark themes if the app supports them
- Flag transparent or semi-transparent colors that reduce effective contrast
- Generate a report: element, foreground color, background color, ratio, pass/fail
- Show the total pass/fail count and compliance percentage
- Highlight the worst offenders that need immediate attention
Rules
- Test both light and dark mode color schemes
- Account for opacity when calculating effective contrast
- Large text threshold: 18px regular or 14px bold
- Do not flag disabled elements as they are exempt from contrast requirements
- Check placeholder text contrast (should meet 4.5:1 even though many sites skip this)
- Consider adjacent color contrast for interactive component boundaries
- Report all unique color pairs, not every instance