Definition
Web Content Accessibility Guidelines (WCAG) is the W3C standard defining how to make web content accessible to people with disabilities. Conformance comes in three levels: A (basic), AA (legal target in most jurisdictions), AAA (enhanced).
WCAG 2.1 is the operative version most legal frameworks reference. Its 78 success criteria cover everything from colour contrast (4.5:1 for normal text at AA) to keyboard navigation, screen-reader compatibility, and time-out controls. WCAG 2.2 (released 2023) added 9 new criteria. WCAG 3.0 is in draft.
Compliance isn't a checkbox; it's a design discipline. Done at the start of a project, accessibility costs almost nothing. Retrofitted at the end, it can require rebuilding components from scratch. Most successful accessibility programs work component-by-component in the design system, not page-by-page on the live site.
Origin
WCAG 1.0 published by the W3C in 1999. WCAG 2.0 in 2008 became the basis for most accessibility laws (US ADA, EU EN 301 549, UK Equality Act). WCAG 2.1 in 2018 added mobile and cognitive criteria. WCAG 2.2 in 2023.
How it works
- Audit the existing site/product against WCAG 2.1 AA (the standard target).
- Triage findings: critical (legal exposure), important (UX harm), minor (polish).
- Fix in the design system, not the consumer. Component-level fixes reach every page.
- Add automated testing (axe, Lighthouse) to the CI pipeline.
- Add manual testing (keyboard-only, screen-reader sweep) to release checklists.
- Re-audit annually.
When to use it
Use when
- On every public-facing product or marketing site.
- When operating in jurisdictions with active accessibility lawsuits (US in particular).
- After major UI redesigns — accessibility regressions sneak in.
Skip when
- As a launch-day checkbox. Accessibility added late never works.
- Without manual testing. Automated tools catch ~30% of issues.
Key metrics
- WCAG 2.1 AA conformance rate (% of criteria met).
- Critical and serious axe violations per page.
- Manual keyboard-navigation pass rate.
- Screen-reader-tested page count.
Examples
- WCAG 2.1 AA is the legal target — anything less is a lawsuit risk in the US.
- After we fixed colour contrast in the design system, 78 pages went from failing to passing automatically.
- Lighthouse passes; the screen reader doesn't. Manual testing catches what auto can't.
In practice at Makreate
Makreate ships WCAG 2.1 AA-conformant work as a default for US clients — the ADA exposure makes it non-negotiable. We integrate axe-core in CI, run manual screen-reader passes on every major release, and bake colour-contrast tokens into the design system at the variable level so contrast can't be broken by accident. A recent enterprise client had 320 critical violations across their marketing site. We fixed them in 6 weeks, not by visiting 80 pages, but by patching 14 components in the design system that those pages composed.
UX Design →Common mistakes
- Treating accessibility as a checklist instead of a practice.
- Relying on automated tools alone. Axe catches ~30% of real issues.
- Adding accessibility at the end. Costs 10× more than building it in.
- Aiming for AAA on a public site. AA is the operational target; AAA is for specific surfaces.
- Forgetting cognitive accessibility — most teams over-index on visual.
Frequently asked
Is WCAG legally required?
In the US, the ADA has been interpreted to apply to websites; settlements regularly cite WCAG 2.1 AA. EU Directive 2016/2102 mandates EN 301 549 (which references WCAG) for public sector and many private sites.
WCAG AA or AAA?
AA is the practical target — what most laws cite, what most products can meet, what most users need. AAA is for specialised contexts (government, accessibility-focused tools).
What about WCAG 2.2 vs 2.1?
2.1 is what most law cites today. 2.2 added 9 criteria around focus indication and target size. Aim for 2.1 AA today and add 2.2 incrementally; full 2.2 will become the legal standard within a few years.