Aktualisiert 15. Juli 2026

Der European Accessibility Act und deine Farbpalette

Der European Accessibility Act (EAA) ist eine EU-Richtlinie, die eine breite Palette digitaler Produkte und Dienstleistungen, die in der EU verkauft werden — E-Commerce, Banking, Verkehr, E-Books und mehr —, dazu verpflichtet, barrierefrei zu sein, wobei die Durchsetzung durch die Mitgliedstaaten ab Juni 2025 schrittweise in Kraft tritt. Für Farbe wirkt sich das praktisch über eine Kette von Standards aus, die bei WCAG 2.1 AA endet: Die Kontrastuntergrenzen von 4,5:1 und 3:1 wurden von Best Practice zu einer regulatorischen Erwartung für Produkte im Anwendungsbereich.

Eines vorweg, bevor es ins Detail geht: Wir sind eine Seite für Design-Tools, keine Anwaltskanzlei, und dieser Artikel bietet Orientierung, keine Rechtsberatung — wo dein Produkt unter dem EAA steht, ist eine Frage für Juristen. Was wir tun können, ist zu erklären, wie eine Richtlinie am Ende auf dieselben Kontrastwerte verweist, die sich durch unseren Kontrast-Leitfaden ziehen, und was das für die Arbeit an Paletten in der Praxis bedeutet.

Was ist der European Accessibility Act?

Der EAA ist eine Richtlinie, keine Verordnung — ein Unterschied mit Folgen. Eine Richtlinie legt das Ziel fest, und jeder Mitgliedstaat schreibt sie in nationales Recht — deshalb unterscheiden sich die Durchsetzungsmechanismen, Strafen und manche Details von Land zu Land. Das häufig genannte Datum, der 28. Juni 2025, ist der Zeitpunkt, ab dem die Pflichten für die meisten Produkte und Dienstleistungen im Anwendungsbereich zu gelten begannen, doch die Übergangsfristen variieren je nach Staat und Produktkategorie — manche bestehenden Dienstleistungen und Selbstbedienungsterminals haben längere Fristen. Die sichere allgemeine Aussage: Seit 2025 gilt die Pflicht, und die Details, wann genau, für dich, hängen davon ab, wo und was du verkaufst.

Wie kommt ein Gesetz dazu, Kontrastverhältnisse festzulegen?

Die Richtlinie selbst erwähnt Kontrast nicht — sie formuliert die Barrierefreiheits-Anforderungen in funktionalen Begriffen. Die Zahlen kommen über die Kette der Standards ins Spiel: Konformität wird in der Praxis anhand von EN 301 549 bewertet, dem europäischen Standard für IKT-Barrierefreiheit, und für Webinhalte und Apps übernimmt EN 301 549 WCAG 2.1 Level AA. Innerhalb von WCAG 2.1 AA stecken die zwei Kriterien, an denen sich eine Palette messen lassen muss: Textkontrast bei 4,5:1 (3:1 für großen Text) und Nicht-Text-Kontrast bei 3:1 für bedeutungstragende Interface-Komponenten.

Die Kette verläuft also: EAA → nationales Recht → EN 301 549 → WCAG 2.1 AA → deine Text-auf-Hintergrund-Kombinationen. Nichts in dieser Kette ist eine neue Design-Anforderung — es sind dieselben Untergrenzen, die die Arbeit an Barrierefreiheit seit Jahren anvisiert. Was sich geändert hat, ist ihr Gewicht: Bei Produkten im Anwendungsbereich ist eine durchfallende Kombination nicht mehr nur ein Qualitätsmangel.

Welche Produkte fallen in den Anwendungsbereich?

Die Richtlinie nennt Kategorien statt Technologien: E-Commerce-Dienste, Verbraucher-Banking, Personenverkehrsdienste, E-Books und ihre Plattformen, elektronische Kommunikation und die verbrauchergerichteten Seiten mehrerer Gerätekategorien. Zwei häufig relevante Ausnahmen: Reine B2B-Dienste fallen größtenteils außerhalb des verbrauchergerichteten Anwendungsbereichs, und Kleinstunternehmen — unter 10 Beschäftigten und unter 2 Millionen € Umsatz — sind von den Dienstleistungspflichten befreit. Beide Grenzen haben Ränder (ein B2B-Unternehmen mit einem öffentlichen E-Commerce-Checkout, ein wachsendes Unternehmen, das die Schwelle überschreitet), und genau an diesen Rändern verdienen Juristen ihr Honorar. Die Erkenntnis für die Design-Seite ist einfacher: Wenn Verbraucher in der EU dein digitales Produkt kaufen oder nutzen, geh davon aus, dass die Untergrenzen gelten, bis dir jemand Qualifiziertes etwas anderes sagt.

Was bedeutet das konkret für die Arbeit an Paletten?

Drei Dinge, in absteigender Reihenfolge des eingesparten Aufwands.

Die Kombinationen, die immer hätten bestehen sollen, tragen jetzt rechtliches Gewicht. Die Arbeit ist unverändert — Fließtext bei 4,5:1, großer Text und UI-Komponenten bei 3:1 —, aber „Kontrast reparieren wir später” altert jetzt anders bei einem Produkt im Anwendungsbereich.

Die günstigste Konformität sind Untergrenzen zur Bauzeit. Eine Palette, deren Rollen mit den bei der Ableitung erzwungenen AA-Untergrenzen abgeleitet werden, kann die durchfallende Kombination gar nicht erst erzeugen — eine Entscheidung an der Quelle ersetzt seitenweise Audits weiter unten.

Der Prüfpfad zählt. Durchsetzungsregime fragen nicht nur, ob du konform bist, sondern ob du es belegen kannst. Prüfungen, die bei der Ableitung laufen, und Exporte, die die abgeleiteten Werte tragen (design tokens, CSS-Variablen), hinterlassen Dokumentation als Nebeneffekt; Ad-hoc-Korrekturen hinterlassen nichts, worauf man verweisen könnte.

Öffne eine gegen die AA-Untergrenzen abgeleitete Palette — jede Text- und UI-Rolle bei der Ableitung gegen ihre Oberfläche geprüft, mit dem Verhältnis neben jeder Kombination angezeigt.

Scale Composer zeigt eine mit WCAG-AA-Untergrenzen abgeleitete Palette, wobei jede semantische Rolle ihr berechnetes Kontrastverhältnis gegen ihre Oberfläche anzeigt

Was verlangt der EAA nicht?

Die Panik zu dämpfen ist ebenso nützlich wie die Pflicht zu benennen. Der EAA verlangt kein APCA und keine Entwurfsmetrik aus WCAG 3 — die Kette endet bei WCAG 2.1, und neuere Kontrastmodelle haben darin kein regulatorisches Gewicht. Er verlangt kein AAA: Die Stufe für erhöhten Kontrast mit 7:1 bleibt freiwillig, und die regulatorische Messlatte ist AA. Er schreibt keine bestimmten Farben vor — keine Palette, kein Farbton und keine „Liste barrierefreier Farben” taucht irgendwo in der Kette auf; zwei beliebige Farben, die die Verhältnisse erreichen, sind in Ordnung. Und er verbietet keine Markenfarbe: Ein Markenblau mittlerer Helligkeit, das auf Weiß die 4,5:1 verfehlt, bleibt für großen Text, UI-Komponenten und Flächen voll nutzbar — was es nicht sein kann, ist Fließtext auf diesem Hintergrund.

Wie steht er im Vergleich zu Gesetzen anderswo?

Nur kurz, denn jedes verdient einen eigenen Artikel: In den Vereinigten Staaten verweisen sowohl die ADA-Rechtsprechung als auch Section 508 in der Praxis auf WCAG, sodass dieselben AA-Untergrenzen die De-facto-Messlatte sind. Der Equality Act des Vereinigten Königreichs und die Barrierefreiheits-Vorschriften für den öffentlichen Sektor weisen in dieselbe Richtung, ebenso vergleichbare Regime in Kanada und Australien. Das Muster für eine Palette ist praktisch: Ein Standard — WCAG 2.x AA — erfüllt die Kontrasterwartungen praktisch jedes großen Regimes auf einmal. Für AA zu bauen ist keine EU-spezifische Arbeit.

Wie prüfst du eine bestehende Palette auf Lücken?

Ein durchgearbeiteter Durchgang, geordnet nach Exposition — die meistgelesenen Kombinationen zuerst:

  1. Fließtext auf jeder Seitenoberfläche — Weiß, Karten, getönte Panels — bei 4,5:1. Höchstes Volumen, höchste Prüfschärfe.
  2. Sekundärer und gedämpfter Text bei 4,5:1 — zählt zu den häufigsten Fehlerklassen in Audits: helle Grautöne wie #9CA3AF auf Weiß liegen bei ≈2,5:1, während #6B7280 bei ≈4,8:1 besteht.
  3. Text auf gefüllten Steuerelementen — Beschriftungen gegen die Füllung, nicht die Seite: Weiß auf einem #2563eb-Primärbutton liegt bei ≈5,2:1.
  4. Komponentengrenzen bei 3:1 — Eingabefeld-Rahmen, bedeutungstragende Icons, Fokusindikatoren, Zustände wie ausgewählt vs. nicht ausgewählt.
  5. Zustandsfarben — Fehler-, Erfolgs- und Warntext bei 4,5:1 gegen ihre Hintergründe (ein häufiger Fehler: Fehlerrot auf einem rosa Farbton).
  6. Beide Themes — Dark Mode würfelt jede Zeile oben neu; prüfe ihn separat, statt vererbten Urteilen zu vertrauen.

Deaktivierte Steuerelemente und dekorative Elemente sind ausgenommen und können vom Durchgang ausgeschlossen werden — aber halte fest, dass sie ausgeschlossen wurden, für den Prüfpfad.

Führe die Lückenprüfung an deiner eigenen Palette durch

Die Liste oben ist mechanisch genug, um sie zu delegieren. Lade deine Palette und arbeite die Lückenprüfung durch — jedes Rollenpaar aus der Liste, der Reihe nach gegen die AA-Untergrenzen geprüft, sodass am Ende eine To-do-Liste steht statt einer offenen Frage.

Weiterlesen

  • WCAG-Kontrastverhältnisse erklärt (4,5:1, 3:1, 7:1)

    Die WCAG-Kontrast-Schwellenwerte erklärt: 4,5:1 für Fließtext, 3:1 für großen Text und UI-Komponenten, 7:1 für AAA — mit sechs berechneten echten Paarungen.

  • Kontrast testen: Werkzeuge und Methode

    Ein Farbkontrast-Checker auditiert Paarungen eine nach der anderen. Die Methode, die skaliert: Paletten bauen, die schon bei der Ableitung bestehen, dann den Rest scannen und stichprobenartig prüfen.