WCAG, short for the Web Content Accessibility Guidelines, is the international technical standard that defines testable success criteria for making web content and digital interfaces usable by people with disabilities. In accessibility work within design, it is the shared yardstick that designers, developers, auditors and regulators use to decide whether a page, an app screen or a document is accessible enough.
The guidelines are published by the World Wide Web Consortium (W3C) through its Web Accessibility Initiative. Version 2.0 also became the international standard ISO/IEC 40500, and most accessibility laws and procurement rules point to WCAG rather than writing their own technical requirements.
How WCAG is structured
WCAG is organized as a four-level hierarchy: principles, guidelines, success criteria and sufficient techniques. Only the success criteria are normative and testable; the guidelines explain intent, and the techniques show known ways to meet a criterion without being mandatory.
The four principles are summarized by the acronym POUR. Content must be perceivable, operable, understandable and robust, and every success criterion sits under exactly one of them. The table below shows what each principle demands in design terms.
| Principle | Core question | Typical design concerns |
|---|---|---|
| Perceivable | Can users sense the content? | Text alternatives, captions, color contrast, reflow |
| Operable | Can users work every control? | Keyboard access, focus order, timing, target size |
| Understandable | Can users follow content and behavior? | Clear labels, predictable navigation, error help |
| Robust | Can assistive technology interpret it? | Valid markup, name, role and value exposed |
Each success criterion is written so that a qualified evaluator can decide pass or fail for a given page. This testability is what separates WCAG from general usability advice, and it is the reason the standard can be referenced in contracts and legislation.
Conformance levels A, AA and AAA
WCAG assigns every success criterion to one of three conformance levels, and a page conforms at a level only when it meets all criteria of that level and the levels below. Partial conformance does not exist at the criterion level: one failing criterion means the page does not conform.
| Level | Meaning | Example criteria | Typical use |
|---|---|---|---|
| Level A | Minimum barrier removal | Non-text content, keyboard access, no keyboard trap | Never sufficient on its own |
| Level AA | Accepted practical target | Contrast minimum, resize text, focus visible | Legal and procurement baseline |
| Level AAA | Enhanced accessibility | Enhanced contrast 7:1, sign language for media | Selected content or specialist services |
Level AA is the de facto target almost everywhere. The European standard EN 301 549, the revised Section 508 rules in the United States and many national laws reference WCAG AA. The W3C itself advises against requiring full AAA conformance for entire sites, because some AAA criteria cannot be met for all content types.
WCAG versions and what changed
WCAG versions are backward compatible: content that meets WCAG 2.2 also meets 2.1 and 2.0 at the same level. Each release added criteria for gaps that earlier versions missed, especially mobile interaction, low vision and cognitive disabilities.
| Version | Released | Key additions |
|---|---|---|
| WCAG 1.0 | 1999 | Checkpoints tied to HTML of that era; now obsolete |
| WCAG 2.0 | 2008 | Technology-neutral POUR model, 61 success criteria |
| WCAG 2.1 | 2018 | Reflow, non-text contrast 3:1, orientation, text spacing |
| WCAG 2.2 | 2023 | Focus not obscured, target size minimum, accessible authentication |
WCAG 2.2 also removed criterion 4.1.1 Parsing, because modern browsers and assistive technologies handle markup errors consistently. A new generation, WCAG 3, is in development with a different scoring model and a candidate contrast method, but it remains a working draft and is not yet a conformance target.
Success criteria that matter most for designers
Many WCAG failures originate in design decisions made before any code exists. Color choices, focus styles, touch targets and form layouts are set in design files, so designers carry direct responsibility for a large share of AA criteria.
| Criterion | Requirement | Design implication |
|---|---|---|
| 1.4.3 Contrast (minimum) | 4.5:1 for body text, 3:1 for large text | Check every text and background pair |
| 1.4.11 Non-text contrast | 3:1 for UI components and graphics | Input borders and icons need visible edges |
| 1.4.10 Reflow | No two-way scrolling at 320 CSS px width | Layouts must collapse to one column |
| 1.4.1 Use of color | Color is not the only signal | Add text, icons or patterns to states |
| 2.4.7 Focus visible | Keyboard focus is always visible | Design an explicit focus style |
| 2.5.8 Target size (minimum) | Targets at least 24 by 24 CSS px | Space small icons or enlarge hit areas |
Large text in WCAG means at least 18 point regular or 14 point bold, roughly 24 and 18.66 CSS pixels. The contrast ratio itself is calculated from relative luminance, so two colors that look distinct to a designer can still fail.
Testing and common misconceptions
Reliable WCAG evaluation combines automated scanning, manual inspection and assistive technology testing. Automated tools detect only a minority of issues, commonly estimated at roughly 30 to 40 percent, because they cannot judge whether alt text is meaningful or whether focus order makes sense.
- An overlay widget does not create conformance. Scripts injected on top of a page cannot repair missing semantics or poor design.
- A perfect automated score is not compliance. It shows only that detectable failures are absent.
- ARIA is not a shortcut. Incorrect ARIA roles often make content less accessible than plain native elements.
- Accessibility is not a final checklist. Fixing contrast or target size after development costs far more than designing it correctly.
- WCAG is not the whole user experience. A conformant page can still be confusing, so testing with disabled users remains valuable.
Conformance claims apply to complete pages and complete processes. A checkout flow conforms only if every step conforms, so one inaccessible payment step breaks the claim for the whole process.
Put simply
WCAG is a rulebook for building websites and apps that everyone can use, including people who are blind, deaf, have limited movement or find complex text hard to follow. It works a little like a building code. A building code says how wide a doorway must be; WCAG says how strong text contrast must be or how a button must work without a mouse.
Each rule can be checked with a clear yes or no. Most organizations aim for the middle level, called AA, because laws usually ask for it and it covers the barriers that block people most often.
In practice
A public university redesigns its course registration portal and must meet WCAG 2.2 level AA under its procurement policy. During design review, the team finds that the brand’s light gray placeholder text reaches only 2.8:1 against white, the error state is shown with a red border alone, and the calendar icon buttons measure 18 by 18 pixels.
The designers darken the text to a gray that reaches 5.1:1, add an error icon and a written message to each invalid field, and enlarge the icon hit areas to 24 by 24 pixels. Developers then test the flow with a keyboard and two screen readers and fix a focus trap in the date picker.
The final audit finds no level A or AA failures, and support requests from students using assistive technology during the next enrollment period drop noticeably because every registration step can now be completed independently.