WCAG 2.1 Level AA is the bar most SaaS teams need. The goal isn’t a perfect score once — it’s a repeatable review before shipping UI. Automate what you can; manually verify keyboard paths and screen reader flows for critical journeys (sign-in, checkout, settings).
Contrast and non-color cues
- Body text ≥ 4.5:1 contrast; large text ≥ 3:1. Check muted labels and placeholders too.
- Don’t use color alone for errors, success, or required fields — add text or icons.
- Focus rings need ≥ 3:1 against adjacent colors. Never remove outline without a visible replacement.
- Test light and dark themes separately; one theme usually fails first.
Keyboard and focus
If you can’t complete the happy path with Tab, Enter, Space, and Escape, neither can a large share of power users and assistive-tech users.
- Tab order follows visual order. Custom widgets must expose the right roles and states.
- Modals trap focus while open and restore focus to the trigger on close.
- Menus support Arrow keys; Escape closes overlays.
- Provide a skip link to main content on pages with dense chrome.
Forms that announce errors
- Every input needs a real <label> or aria-label — placeholders don’t count.
- Associate error text with the field (aria-describedby) and announce it.
- Don’t rely on red borders alone; say what failed and how to fix it.
- Disable submit only when necessary, and explain why when you do.
Where automation helps
axe-core catches a large slice of WCAG failures: missing names, contrast issues, landmark problems. It won’t catch poor focus order or confusing copy. Pair automated scans with a 10-minute keyboard pass on each release.
Health Mesh runs axe-core against live pages, groups violations by severity, and points at selectors so fixes aren’t a scavenger hunt.