Accessibility Testing: color-contrast and focus
Check color contrast ratios and verify focus indicators meet WCAG accessibility standards.
Why CSS Affects Accessibility
CSS controls color contrast, focus indicator visibility, element visibility (display:none removes from accessibility tree), and reading order (visual reorder via flexbox order vs DOM order). CSS choices directly impact whether users with disabilities can use the interface.
WCAG Color Contrast Requirements
WCAG 2.1 AA requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA requires 7:1 and 4.5:1 respectively. These ratios compare foreground text color luminance against background color luminance.
All lessons in this course
- Visual Regression Testing Concepts
- Percy and Chromatic for Storybook
- CSS Unit Testing with Jest
- Accessibility Testing: color-contrast and focus