WCAG explained for designers: levels A, AA and AAA
WCAG are the W3C's web accessibility guidelines. What the A, AA and AAA levels mean, their four principles and which level a designer should aim for.
What is WCAG and what is it for?
WCAG is the reference standard for web accessibility. The W3C publishes it through its Web Accessibility Initiative (WAI), and the current version is WCAG 2.2, published as a W3C Recommendation on 5 October 2023 and updated on 12 December 2024. Content that conforms to WCAG 2.2 also conforms to WCAG 2.0 and 2.1, because the new version does not replace the earlier ones. WCAG 2.2 is also an ISO standard (ISO/IEC 40500:2025). WCAG 3.0 exists only as an early draft and does not replace anything yet.
WCAG 2.2 added 9 success criteria. The ones that most affect interface design are focus not obscured (2.4.11, AA), dragging movements with an alternative (2.5.7, AA), target size minimum (2.5.8, AA), consistent help (3.2.6, A), redundant entry (3.3.7, A) and accessible authentication (3.3.8, AA). It also removed criterion 4.1.1 (Parsing), which is no longer evaluated in 2.2.
For a designer, WCAG is the shared language with legal, with development and with the client. When someone asks “is this accessible?”, the useful answer is “which criterion, at which level, does it meet?”
What do levels A, AA and AAA mean?
The levels are cumulative. To meet AA you must meet all of A and all of AA. To meet AAA, everything above plus all AAA criteria.
| Level | What it represents | Example criterion |
|---|---|---|
| A | The minimum. Without it, there are serious barriers | 1.1.1 Non-text content: images have a text alternative |
| AA | The usual target for digital products | 1.4.3 Contrast (minimum): 4.5:1 for normal text, 3:1 for large text |
| AAA | The most demanding level | 1.4.6 Contrast (enhanced): 7:1 for normal text |
The W3C clarifies that AAA is not recommended as a general requirement for an entire site. Some AAA criteria are hard to meet across all content, for example sign language for every video or 7:1 contrast everywhere. The sensible approach is to apply them where they add value, such as a health text or a public service.
What are the four principles?
WCAG organizes everything under four principles:
- Perceivable. Information must be presented in ways users can perceive: text alternatives, captions, sufficient contrast.
- Operable. The interface must be usable: by keyboard, with enough time, without triggering seizures and with touch targets of an adequate size.
- Understandable. Information and operation must be clear: a defined language, predictable behavior, errors explained.
- Robust. Content must work with assistive technologies, present and future, such as screen readers.
Every criterion belongs to one of these principles. You can remember them as four questions: can it be seen, can it be used, can it be understood, and does it work with what people actually use?
Each criterion has a number, such as 1.4.3. The first digit gives the principle (1 is perceivable), the second the guideline within it (1.4 is distinguishable: contrast and color) and the third the specific criterion. The number is useful in a team conversation: instead of saying “the contrast is wrong”, you can write “fails 1.4.3” and everyone checks the same rule. WCAG also documents sufficient techniques for each criterion, with examples of how to meet it, in its Understanding pages.
Which level should you aim for?
The short answer is AA. It covers key criteria for contrast, keyboard, focus and forms, without requiring AAA criteria across the whole product. It is also the level that regulations tend to cite: for example, the US Department of Justice rule for state and local government websites and apps (ADA Title II) requires WCAG 2.1 Level AA, with deadlines that an April 2026 interim rule moved to April 2027 (entities with a population of 50,000 or more) and April 2028 (all others). Always check which version and deadline apply in your country or sector.
But it is not a technical decision. The W3C presents it as a policy decision: the organization chooses which level it meets and where it applies AAA. That is why the target level should be written down in the product, together with its scope (which screens, which flows) and how it will be measured.
A common mistake is using “meets WCAG AA” as a label without auditing. A site can pass an automated test and still fail in real use with a screen reader. That is what screen reader testing is for.
Example
Illustrative example: a team designs a loan application form. It checks three Level A and AA points before handoff. The help text in light grey does not reach 4.5:1 contrast (1.4.3), so they darken it. Validation errors appear as text and not only in red (1.4.1 and 3.3.1). And the “View terms” button is at least 24 by 24 CSS pixels, the size asked for by the target size criterion in WCAG 2.2 (2.5.8). The team documents which criteria it meets and which it leaves for a second iteration.
For your next design: take one screen, check the contrast of all text with a tool, and confirm whether a field’s error is understood without seeing the color. These are Level A and AA criteria you can verify in an hour.
Common mistakes
- Thinking WCAG is only about contrast. There are criteria for keyboard, focus, language, errors and multimedia.
- Aiming for AAA everywhere without a plan, and shipping with nothing met.
- Certifying “accessible” after an automated test. Many barriers need human evaluation.
- Ignoring visible focus, which is easy to forget when designing components.
- Designing with color alone. A success or error state that depends only on color does not meet the perceivable principle.
- Using WCAG as a checklist instead of a basis for decisions. The criteria explain why the barrier exists.
Related in the wiki
To understand the difference between accessible and inclusive, read inclusive versus accessible. If you work on contrast, color contrast math explains how the ratio is calculated. For how screen readers interpret the interface, see the accessibility tree. And if you are defining the system’s palette, color palettes and tokens is the natural next step.