Accessibility Testing: color-contrast and focus
Check color contrast ratios and verify focus indicators meet WCAG accessibility standards.
Accessibility Testing: color-contrast and focus is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Checking Contrast in DevTools
Click any text element in DevTools → Styles panel. The color swatch shows a contrast ratio badge. A checkmark indicates passing; X indicates failure. The color picker shows the AA/AAA threshold lines on the color gradient.
Automated Contrast Testing
axe-core, Lighthouse, and Pa11y automatically audit contrast ratios across all text elements. Run axe-core with @axe-core/react in development to get real-time contrast warnings in the browser console during development.
Focus Indicators
CSS outline: none or outline: 0 on :focus removes the browser's default focus ring, making keyboard navigation invisible. This is a critical accessibility failure. Replace with a custom, visible focus style rather than removing focus indicators entirely.
button:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
border-radius: 4px;
}:focus-visible vs :focus
:focus applies to all focus events including mouse clicks (causing a visible ring on click, which designers dislike). :focus-visible applies only when the browser determines keyboard navigation is in use — giving keyboard users a focus ring without showing it on mouse clicks.
WCAG Focus Indicator Requirements
WCAG 2.2 introduces Success Criterion 2.4.11 (Focus Appearance AA): focus indicators must have at least 3:1 contrast against adjacent colors and encompass the perimeter of the component. Custom focus styles must meet these requirements, not just exist.
Forced Colors Mode
Windows High Contrast Mode overrides CSS colors with user-defined system colors. Use @media (forced-colors: active) to provide alternative styles that work in high contrast mode. Test with Windows Settings → Accessibility → High Contrast.
Color as Sole Indicator
WCAG 1.4.1 prohibits using color as the only way to convey information. An error state that only turns red fails this criterion. Combine color with icons, text labels, patterns, or underlines so non-color information is always present.
Text Resize and Spacing
WCAG 1.4.4 requires text to be resizable to 200% without loss of content. WCAG 1.4.12 requires text spacing overrides (increased letter-spacing, line-height) not to break layout. Use relative units (rem, em) for typography to support both requirements.
Testing Tools Suite
Comprehensive accessibility CSS testing: axe DevTools browser extension for development, Lighthouse CI for automated pipeline checks, Pa11y for command-line page audits, and manual keyboard navigation testing with Tab/Shift+Tab to verify focus indicator visibility and order.
Knowledge Check
Why should outline: none never be the final CSS for an element's :focus state?
Summary
CSS accessibility testing covers color contrast ratios (4.5:1 AA minimum), visible and WCAG 2.2-compliant focus indicators using :focus-visible, avoidance of color as sole information conveyor, forced-colors mode support, and relative typography units for resize compliance. Automated tools plus manual keyboard testing ensure comprehensive coverage.
Frequently asked questions
Is the “Accessibility Testing: color-contrast and focus” lesson free?
Yes — the full text of “Accessibility Testing: color-contrast and focus” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Accessibility Testing: color-contrast and focus”?
Check color contrast ratios and verify focus indicators meet WCAG accessibility standards. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Accessibility Testing: color-contrast and focus” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
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