--- title: "WCAG" url: "https://www.insideuxdesign.com/en/glossar/wcag" language: "en" description: "What is WCAG? A plain-language guide to its principles, levels A to AAA, the current version and the legal picture. Learn how to check your website against it." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T13:04:57+02:00" --- # WCAG WCAG (Web Content Accessibility Guidelines) are the W3C’s internationally recognized guidelines for accessible web content. They define testable criteria that laws around the world build on. - **Buchstabe:** W UX glossary # WCAG WCAG (Web Content Accessibility Guidelines) are the W3C’s internationally recognized guidelines for accessible web content. They define testable criteria that laws around the world build on. Imagine a team gets a clear order: “Our website has to be accessible.” Questions pop up right away. Is good contrast enough? And how do you know when you’re done? That’s exactly what WCAG is for. It turns the big idea of accessibility into a list of concrete, testable requirements. ## Explained simply WCAG stands for *Web Content Accessibility Guidelines*. They’re published by the World Wide Web Consortium (W3C), the body that also maintains standards like HTML and CSS. The first version of WCAG 2 came out in 2008. The current version, WCAG 2.2, was published in October 2023 and updated again in December 2024. Think of WCAG as a building code for websites. A building code doesn’t tell you what a house should look like, but it does set how wide doors and how high steps may be. WCAG leaves you the same creative freedom but sets minimum standards. ## Four principles, three levels WCAG is organized around four principles. Content has to be **perceivable** (for example, alt text for images), **operable** (fully usable with a keyboard, say), **understandable** (clear language, predictable behavior) and **robust**, meaning it works reliably with browsers and assistive tools like a [screen reader](https://www.insideuxdesign.com/en/glossar/screen-reader). Below these principles sit 13 guidelines, and below those the actual success criteria. Each criterion belongs to a conformance level: A is the minimum, AA the usual target, and AAA the highest level. One AA example is a contrast ratio of at least 4.5:1 for regular text. The versions build on each other: according to the W3C, content that meets WCAG 2.2 also meets WCAG 2.1 and 2.0. ## Which version applies legally? Laws usually don’t point to WCAG directly but to the European standard EN 301 549. Its version V3.2.1, the reference so far, requires the level A and AA criteria from WCAG 2.1 for websites. In Germany, it’s the benchmark both for public bodies under the BITV 2.0 (the federal accessibility regulation for government IT) and for companies covered by the BFSG, Germany’s implementation of the European Accessibility Act. In September 2026, the new version V4.1.1 of EN 301 549 was published, aligned with WCAG 2.2 AA. It may take a while until it’s listed in the Official Journal of the EU and carries full legal weight. In practice: if you’re building something new today, aim straight for WCAG 2.2 AA. For more on the legal side, read [The BFSG in Practice: What Germany’s Accessibility Act Means for Websites and Apps](https://www.insideuxdesign.com/en/blog/bfsg-in-practice-german-accessibility-act-websites-apps). ## An example Here’s an example: an online shop marks required fields in its checkout with nothing but a red border. An audit flags several problems at once. Color is the only signal (criterion 1.4.1), there’s no label a screen reader can announce (3.3.2), and the error message doesn’t say what’s wrong (3.3.1). After the fix, required fields say “required” in their label, and error messages explain the problem in words, such as “Please enter a five-digit ZIP code.” Instead of a vague complaint, the team now has a clear to-do list it can work through and test again. ## Common misconceptions Automated testing tools only cover part of the criteria. Whether alt text makes sense is something a person has to judge. WCAG isn’t just for websites, either: EN 301 549 applies it to apps and documents as well. And its successor, WCAG 3, is still an early draft, so there’s no reason to wait for it. ## In practice - **Use the quick reference.** The official [WCAG 2.2 Quick Reference](https://www.insideuxdesign.com/en/ressourcen/wcag-22-quick-reference) can be filtered by level and topic and explains every criterion with techniques. - **Combine tools with manual checks.** Automated tests quickly catch missing alt text and contrast issues, but keyboard and screen reader testing is still manual work. Learn how in [Accessibility Testing: Tools and Methods for UX Designers](https://www.insideuxdesign.com/en/blog/accessibility-testing-tools-and-methods-for-ux-designers). - **Build the criteria into your design system.** Once buttons, form fields and colors are WCAG-compliant, every new page inherits that quality. ## Related terms [Accessibility](https://www.insideuxdesign.com/en/glossar/accessibility), [Screen Reader](https://www.insideuxdesign.com/en/glossar/screen-reader), [Design System](https://www.insideuxdesign.com/en/glossar/design-system) ## Sources - [W3C: Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation, 2024](https://www.w3.org/TR/WCAG22/) - [W3C Web Accessibility Initiative: WCAG 2 Overview. W3C, 2026](https://www.w3.org/WAI/standards-guidelines/wcag/) - [Deque Systems: EN 301 549 V4.1.1 Is Final: What Changed, What It Means and What You Should Do. Deque Blog, 2026](https://www.deque.com/blog/en-301-549-v4-1-1-is-final-what-changed-what-it-means-and-what-you-should-do/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Dark Patterns Dark patterns are design tricks that push people into decisions they don’t actually want to make, like hidden cancellation options or preselected add-ons. ](https://www.insideuxdesign.com/en/glossar/dark-patterns) [ ### Design System A design system is a shared toolkit of reusable building blocks and rules. It helps teams design and build interfaces that look and behave consistently everywhere. ](https://www.insideuxdesign.com/en/glossar/design-system) [ ### Fitts’ Law Fitts’ Law describes how long it takes to hit a target with a movement: the bigger and closer the target, the faster and more reliably you reach it. In UX design, it helps you size and place buttons and links. ](https://www.insideuxdesign.com/en/glossar/fitts-law) [ ### Gestalt Principles The Gestalt principles describe how your brain automatically groups individual elements into wholes and shapes. In design, they help you structure layouts clearly without extra lines or borders. ](https://www.insideuxdesign.com/en/glossar/gestalt-principles) [ ### Heuristic Evaluation In a heuristic evaluation, experts review an interface against established rules of thumb for good usability. It helps you find typical weak spots quickly and cheaply, even before real people test the product. ](https://www.insideuxdesign.com/en/glossar/heuristic-evaluation) [ ### Hick’s Law Hick’s Law states that decisions take longer the more equally likely options there are. Decision time grows much more slowly than the number of options, though. ](https://www.insideuxdesign.com/en/glossar/hicks-law) [ ### Information Architecture Information architecture describes how the content of a website or app is structured and labeled. It helps people find what they’re looking for and understand where they are. ](https://www.insideuxdesign.com/en/glossar/information-architecture)