Zero Contrast Warnings: Auditing WCAG 2.2 Compliance in Public Design Work
- Audit every text and UI token for minimum 4.5:1 contrast ratios on both light and dark backgrounds.
- Design visible, high-contrast focus rings for keyboard-only navigation users.
- Ensure that color is never the sole indicator of state or validation errors.
Accessibility Is Craft Rigor, Not an Afterthought
Design leaders at top tech companies evaluate whether candidates understand accessibility fundamentals like APCA perceptual contrast, semantic headings, and screen-reader accessibility trees.
Demonstrating that your designs passed accessibility audits before developer handoff proves mature engineering partnership.
Accessible design is not a constraint that makes UI look boring; it is an ergonomic baseline that improves usability for all users.
Building a High-Contrast Semantic Token System
Define colors by functional role rather than aesthetic name. Use tokens like `text-primary` (14:1 ratio), `text-secondary` (7:1 ratio), and `border-interactive` (3:1 ratio).
Audit your color pairings across both light and dark canvas modes to ensure no text falls below the WCAG AA 4.5:1 threshold.
Always pair color indicators with secondary signals (e.g. combining a red border with an error icon and descriptive helper text).
Every interactive element must feature a minimum 2px focus outline with a 3:1 contrast ratio against the adjacent canvas background.
Keyboard Navigation and Focus Rings
Never set `outline: none` in CSS without providing a high-contrast `:focus-visible` replacement.
Show how keyboard users tab through complex multi-column forms, skip to main content, and trigger action modals without a mouse.
Screen Reader Semantic Hierarchy
Detail your semantic heading tree (H1 -> H2 -> H3) and ARIA live regions for dynamic notifications and async loading states.
Documenting screen reader testing demonstrates complete professional craft rigor.
Ready to apply this framework to your case study?
Start drafting with Forma's guided 7-section framework. Free for your first 3 projects.
Start Free Project