What WCAG is, briefly
The Web Content Accessibility Guidelines (WCAG) are the international standard for making web content usable by people with disabilities. They cover perceivability, operability, understandability, and robustness. The current version is WCAG 2.2.
Three conformance levels
- A. The bare minimum. Below this, content is essentially unusable for many people.
- AA. The level most regulations actually require. The right target for most products.
- AAA. Enhanced. Necessary for some specialised content; not always achievable site-wide.
The business case
A larger addressable user base
About one billion people live with a disability of some kind. Around 15% of the global population. Designing past WCAG AA is the only way to count them as users.
Legal protection
Web accessibility lawsuits in the US have risen every year since 2017. Target settled for $6M. Netflix paid $13M. The EU's Accessibility Act extends similar obligations across the bloc starting June 2025. AA is the practical defence.
Better SEO
Accessible markup is, by accident, almost identical to SEO-friendly markup. Semantic landmarks, descriptive link text, alt attributes, and proper heading order all benefit both crawlers and assistive technology.
A better product
Keyboard navigation, visible focus, predictable structure, sufficient contrast — these aren't only accessibility wins. They make the product easier and faster for everyone, especially on bad screens, in bright sunlight, or under cognitive load.
Color contrast — the place to start
Color contrast accounts for a majority of accessibility lawsuits and most automated audit findings. The numbers to remember:
- 4.5:1 — normal text against background, AA.
- 3:1 — large text or UI components, AA.
- 7:1 — normal text, AAA.
Most products fail this somewhere. Audit your design tokens, not just your pages.
Getting started
1. Audit
Run Lighthouse and axe against your top ten pages. Both will give you a triaged list of contrast, semantics, and ARIA issues. Triage by severity, not by page.
2. Fix contrast
The easiest win. Update your design tokens — primary text, secondary text, links, focus rings, disabled states. Use our contrast checker to find the nearest passing color for each pair.
3. Add alt text
Describe what the image does, not what it shows. Decorative images take alt="".
4. Test with real users
Recruit users who rely on keyboard navigation and screen readers. Automated tools catch about 30% of issues; the rest are only visible during real use.
Tools we recommend
- Automated. axe DevTools, Lighthouse, WAVE, Pa11y.
- Contrast. Our checker, WebAIM, Stark.
- Screen readers. NVDA (Windows, free), VoiceOver (macOS), JAWS (commercial).
- Color blindness simulation. Chrome DevTools rendering panel, Coblis, Stark.
One last thing
Accessibility is not a checklist you pass once. It's a discipline. Build it into your design tokens, your code review, and your QA flow — and it stops being expensive.