WCAG 2.1/2.2 guide

WCAG organizes all of its requirements under four principles, often referred to by the acronym POUR. Every success criterion in the standard falls under one of these.

WCAG has gone through several versions. Each version added new success criteria while retaining everything from previous versions.

WCAG 1.0 (1999) was the original set of guidelines. It used a different structure and a simpler contrast evaluation method based on color brightness and difference formulas.

WCAG 2.0 (2008) introduced the current framework — POUR principles, three conformance levels, and the relative luminance contrast ratio formula still used today. This is the version that established the 4.5:1 and 3:1 text contrast thresholds.

WCAG 2.1 (2018) added 17 new success criteria focused on mobile accessibility, low vision, and cognitive disabilities. For contrast, the significant addition was SC 1.4.11 (Non-text Contrast), which extended the 3:1 minimum to UI components and meaningful graphics.

WCAG 2.2 (2023) added 9 new success criteria, primarily around authentication, focus appearance, and dragging interactions. The contrast requirements are unchanged from 2.1.

The contrast formula and thresholds have been the same since WCAG 2.0. Whether you're targeting 2.0, 2.1, or 2.2 compliance, the contrast math is identical. The difference is that 2.1 and 2.2 require contrast checking on more elements (UI components, focus indicators) than 2.0 did.

WCAG 2.2 builds upon WCAG 2.1 by adding requirements related to areas such as visible keyboard focus, target sizes, dragging movements, repeated information, help mechanisms, and accessible authentication.

Many contracts, accessibility policies, audits, and legal requirements still specifically reference WCAG 2.1, while newer projects may target WCAG 2.2.

The existing contrast thresholds are the same in both versions. A color combination that passes a WCAG 2.1 contrast requirement will produce the same result when evaluated under WCAG 2.2.

When a project or policy names a particular version, that version should remain part of the evaluation. For new projects without a required version, the newer WCAG 2.2 standard generally provides broader coverage.

WCAG defines three conformance levels, each building on the one below it.

Level A is the minimum. It addresses the most fundamental barriers — things that would make content completely unusable for some users. Meeting Level A alone is generally not considered sufficient for legal compliance.

Level AA is the standard most organizations target and the level referenced by most accessibility laws, including ADA Title II. It includes everything in Level A plus additional requirements like minimum contrast ratios for text, captions for live audio, and multiple ways to find pages.

Level AAA is the highest standard. It includes stricter thresholds — such as a 7:1 contrast ratio for normal text — and additional criteria that are not always practical to meet across an entire site. The W3C does not recommend requiring AAA conformance as a general policy, but individual AAA criteria can still be valuable for critical content.

What conformance actually means. A website conforms to WCAG at a given level only when it satisfies every applicable success criterion at that level and all lower levels. Passing a contrast check does not mean your site conforms to WCAG AA — it means your site meets one success criterion out of dozens. Conformance is all-or-nothing at each level.

Not all content needs to meet the contrast thresholds. WCAG explicitly exempts:

Logos and brand names. Text that is part of a logo or brand identity has no contrast requirement. This exemption does not extend to body text, navigation, buttons, or headings that happen to use brand colors — only the logo itself.

Purely decorative content. Text or graphics that convey no information and serve no functional purpose are exempt. A background watermark or decorative illustration that doesn't contain essential content would qualify.

Inactive components. Disabled form controls, greyed-out buttons, and other elements that are intentionally non-interactive are exempt while in their disabled state. Once the control becomes active, it must meet the contrast requirements.

Incidental text. Text that appears incidentally within a larger image — such as a street sign in a photograph or text on a book cover in a lifestyle photo — is exempt when the text is not the primary content of the image.

Automated tools can catch roughly 30–40% of WCAG issues — contrast ratios, missing alt attributes, empty headings, missing form labels, duplicate IDs. They are fast, consistent, and valuable as a first pass.

But most accessibility barriers require human judgment. An automated tool can tell you an image has alt text; it cannot tell you whether that alt text is accurate or useful. It can detect that a heading exists; it cannot tell you whether the heading hierarchy makes sense. It can verify a form field has a label; it cannot tell you whether the label is clear.

A thorough accessibility evaluation combines automated scanning with manual testing — navigating by keyboard, testing with a screen reader, verifying focus management, and reviewing content for clarity and logical structure. This is what a professional audit provides that a scanning tool alone cannot.