--- title: "WCAG" url: "https://www.insideuxdesign.com/de/glossar/wcag" language: "de" description: "Was sind die WCAG? Einfach erklärt: Prinzipien, Stufen A bis AAA, aktuelle Version und Gesetzeslage. Erfahre, wie du deine Website gegen die WCAG prüfst." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T13:04:43+02:00" --- # WCAG Die WCAG (Web Content Accessibility Guidelines) sind die international anerkannten Richtlinien des W3C für barrierefreie Webinhalte. Sie legen prüfbare Kriterien fest, an denen sich auch Gesetze orientieren. - **Buchstabe:** W UX-Glossar # WCAG Die WCAG (Web Content Accessibility Guidelines) sind die international anerkannten Richtlinien des W3C für barrierefreie Webinhalte. Sie legen prüfbare Kriterien fest, an denen sich auch Gesetze orientieren. Stell dir vor, ein Team bekommt den Auftrag: „Unsere Website muss barrierefrei werden.“ Sofort tauchen Fragen auf. Reicht ein guter Kontrast? Und woran erkennt man, wann die Arbeit erledigt ist? Genau dafür gibt es die WCAG. Sie machen aus dem großen Wort Barrierefreiheit eine Liste konkreter, überprüfbarer Anforderungen. ## Einfach erklärt WCAG steht für *Web Content Accessibility Guidelines*, auf Deutsch etwa „Richtlinien für barrierefreie Webinhalte“. Herausgeber ist das World Wide Web Consortium (W3C), das auch Standards wie HTML pflegt. Die erste Version der WCAG 2 erschien 2008. Die aktuelle Fassung WCAG 2.2 wurde im Oktober 2023 veröffentlicht und im Dezember 2024 noch einmal aktualisiert. Ein Vergleich aus dem Alltag: Die WCAG funktionieren wie eine Bauordnung für Websites. Eine Bauordnung schreibt nicht vor, wie ein Haus aussieht, aber sie legt fest, wie breit Türen und wie hoch Stufen sein dürfen. Die WCAG lassen dir ebenso Gestaltungsfreiheit, setzen aber Mindeststandards. ## Vier Prinzipien, drei Stufen Die WCAG sind nach vier Prinzipien geordnet. Inhalte müssen **wahrnehmbar** sein (zum Beispiel Alternativtexte für Bilder), **bedienbar** (etwa vollständig per Tastatur), **verständlich** (klare Sprache, vorhersehbares Verhalten) und **robust**, also mit Browsern und Hilfsmitteln wie einem [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader) zuverlässig nutzbar. Unter diesen Prinzipien stehen 13 Richtlinien und darunter die eigentlichen Erfolgskriterien. Jedes Kriterium gehört zu einer Konformitätsstufe: A ist das Minimum, AA der übliche Zielstandard, AAA die höchste Stufe. Ein Beispiel für AA ist das Kontrastverhältnis von mindestens 4,5:1 für normalen Text. Die Versionen bauen aufeinander auf: Was WCAG 2.2 erfüllt, erfüllt laut W3C auch WCAG 2.1 und 2.0. ## Welche Version gilt rechtlich? Gesetze verweisen meist nicht direkt auf die WCAG, sondern auf die europäische Norm EN 301 549. Ihre bislang maßgebliche Version V3.2.1 verlangt für Websites die Kriterien der Stufen A und AA aus WCAG 2.1. In Deutschland ist sie die Referenz für öffentliche Stellen nach der BITV 2.0 und für Unternehmen, die unter das Barrierefreiheitsstärkungsgesetz fallen. Im September 2026 ist die neue Version V4.1.1 der EN 301 549 erschienen, die sich an WCAG 2.2 AA orientiert. Bis sie im Amtsblatt der EU gelistet ist und rechtlich voll wirkt, kann es dauern. Pragmatisch heißt das: Wer heute neu baut, peilt gleich WCAG 2.2 AA an. Mehr zur Gesetzeslage im Artikel [BFSG in der Praxis: Was das Barrierefreiheitsstärkungsgesetz für Websites und Apps bedeutet](https://www.insideuxdesign.com/de/blog/bfsg-in-der-praxis-barrierefreiheitsstaerkungsgesetz-websites-apps). ## Ein Beispiel Ein Beispiel: Ein Onlineshop zeigt Pflichtfelder im Checkout nur mit einer roten Umrandung an. Ein WCAG-Audit findet gleich mehrere Probleme. Farbe ist das einzige Signal (Kriterium 1.4.1), es gibt keine Beschriftung, die ein Screenreader vorlesen kann (3.3.2), und die Fehlermeldung beschreibt nicht, was falsch ist (3.3.1). Nach der Überarbeitung tragen Pflichtfelder den Hinweis „Pflichtfeld“ im Label, und Fehlermeldungen nennen das Problem in Worten, etwa „Bitte gib eine Postleitzahl mit fünf Ziffern ein“. Statt einer vagen Beschwerde hat das Team jetzt eine klare, prüfbare Aufgabenliste. ## Häufige Missverständnisse Automatische Prüftools decken nur einen Teil der Kriterien ab. Ob ein Alternativtext sinnvoll ist, muss ein Mensch beurteilen. Außerdem gelten die WCAG nicht nur für Websites: Die EN 301 549 überträgt sie auch auf Apps und Dokumente. Und die Nachfolgeversion WCAG 3 ist noch ein früher Entwurf, auf den du aktuell nicht warten musst. ## In der Praxis - **Nutze die Kurzreferenz.** Die offizielle [WCAG 2.2 Quick Reference](https://www.insideuxdesign.com/de/ressourcen/wcag-22-quick-reference) lässt sich nach Stufe und Thema filtern. - **Kombiniere Tools und Handarbeit.** Automatische Tests finden Kontrastfehler schnell, Tastatur- und Screenreader-Tests bleiben Handarbeit. Wie das geht, zeigt der Artikel [Accessibility-Prüfung: Werkzeuge und Methoden für UX-Designer](https://www.insideuxdesign.com/de/blog/accessibility-pruefung-werkzeuge-und-methoden-fuer-ux-designer). - **Verankere die Kriterien im Design System.** Wenn Buttons, Formularfelder und Farben einmal WCAG-konform gebaut sind, erbt jede neue Seite diese Qualität. ## Verwandte Begriffe [Barrierefreiheit](https://www.insideuxdesign.com/de/glossar/barrierefreiheit), [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader), [Design System](https://www.insideuxdesign.com/de/glossar/design-system) ## Quellen - [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/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)