Accessibility
Barrierefreie Farben und Typografie: Kontraste im Corporate Design
Barrierefreie Farben und Typografie entstehen, wenn Sie Ihr Corporate Design als System überprüfbarer Beziehungen gestalten: zwischen Schrift und Hintergrund, Bedienelement und Umgebung sowie Information und ihrer visuellen Darstellung. Für WCAG 2.2 auf Konformitätsstufe AA benötigt normaler Text grundsätzlich mindestens 4,5:1 Kontrast, großer Text mindestens 3:1. Farbe darf wichtige Informationen nicht allein vermitteln. Ebenso entscheidend ist, dass Inhalte beim Vergrößern, bei schmalen Ansichten und mit angepassten Textabständen benutzbar bleiben.
Sie müssen dafür nicht jede Markenfarbe austauschen. Häufig genügt es, ihren Einsatz präziser zu regeln, funktionale Varianten zu ergänzen und Komponenten konsequent zu prüfen. Dieser Beitrag zeigt den Weg von der Farbpalette zur überprüfbaren Oberfläche. Alle beschriebenen Nutzungssituationen und Fehlerbeispiele sind hypothetisch; sie illustrieren Vorgehensweisen, keine dokumentierten Kund:innenergebnisse.
1. Markenfarben brauchen definierte Aufgaben
Eine klassische Farbpalette sagt noch nicht, welche Kombinationen im Interface funktionieren. Ein kräftiges Orange kann auf einer großen dekorativen Fläche überzeugend wirken, als kleiner Link auf Weiß aber zu wenig Kontrast haben. Entscheiden Sie deshalb nicht nur, welche Farben zur Marke gehören, sondern auch, wofür sie eingesetzt werden dürfen. Unterscheiden Sie beispielsweise Hintergrund, Standardtext, ergänzenden Text, Link, primäre Aktion, Rahmen und Fokusindikator.
Ordnen Sie diesen Rollen konkrete Werte zu. Solche Design-Tokens verbinden Gestaltung und Entwicklung: Die Rolle „Text auf Markenfläche“ verweist auf eine geprüfte Textfarbe statt auf eine spontane Auswahl. Ergänzen Sie Regeln für helle und dunkle Oberflächen. Eine Freigabe sollte immer die Kombination betreffen, nicht einen Farbwert isoliert. Dokumentieren Sie außerdem unzulässige Anwendungen, etwa die Verwendung eines hellen Akzenttons für kleinteilige Beschriftungen. So bleibt die Marke erkennbar, ohne dass jede neue Seite dieselben Grundsatzentscheidungen wiederholt.
2. Textkontrast richtig messen und bewerten
Die WCAG 2.2 des W3C unterscheidet normalen und großen Text. Als groß gelten mindestens 18 Punkt oder 14 Punkt bei fetter Schrift, entsprechend ungefähr 24 beziehungsweise 18,7 CSS-Pixeln. Eine Überschrift ist also nicht allein wegen ihrer Funktion großer Text. Für kleinere Schrift gilt grundsätzlich 4,5:1; für entsprechend großen Text 3:1. Ein gemessener Wert knapp unter dem Grenzwert wird nicht durch Aufrunden ausreichend.
Prüfen Sie die tatsächlich gerenderte Kombination, einschließlich Transparenzen, Hintergrundbildern und darüberliegenden Flächen. Bei einem Verlauf zählt nicht der Durchschnitt, sondern ob der Text über allen relevanten Hintergrundbereichen ausreichend erkennbar bleibt. Ein Kontrastwerkzeug berechnet das Verhältnis; die Bewertung verlangt zusätzlich Kenntnis von Schriftgröße, Gewicht und Verwendung. Bewahren Sie für die Abnahme Farbwerte, Verhältnis und geprüfte Komponente auf. Planen Sie nach Möglichkeit Abstand zum Mindestwert ein, statt jede Kombination exakt an der Grenze auszulegen.
3. Grenzen, Symbole und Bedienelemente unterscheiden
Für visuelle Informationen, die zur Identifikation von Bedienelementen und ihren Zuständen erforderlich sind, gilt unter den Bedingungen des Nicht-Text-Kontrastkriteriums grundsätzlich mindestens 3:1 gegenüber angrenzenden Farben. Das betrifft beispielsweise einen notwendigen Eingabefeldrahmen oder ein bedeutungstragendes Symbol. Nicht jede dekorative Linie muss diesen Wert erreichen. Entscheidend ist, ob Nutzer:innen die Information benötigen, um Funktion oder Zustand zu erkennen.
Ein hypothetisches Formular verwendet weiße Eingabefelder auf weißem Hintergrund mit kaum sichtbaren grauen Rahmen. Wenn diese Rahmen die Felder erst erkennbar machen, müssen sie entsprechend kontrastreich sein. Die Korrektur kann ein dunklerer Rahmen oder eine ausreichend unterscheidbare Feldfläche sein. Die sichtbare Beschriftung benötigt unabhängig davon den passenden Textkontrast. Vermeiden Sie die pauschale Regel „Jeder Button braucht einen dunklen Außenrand“: Ob die Begrenzung notwendig ist, hängt von der gesamten Darstellung ab. Prüfen Sie stattdessen jedes relevante Erkennungsmerkmal.
4. Zustände als zusammenhängende Familie gestalten
Ein freigegebener Standardbutton beweist noch nicht, dass die Komponente zugänglich ist. Definieren Sie Standard, Hover, Tastaturfokus, aktive Betätigung, Auswahl und gegebenenfalls Fehlerzustand gemeinsam. Für jede Variante müssen die relevanten Text- und Nicht-Text-Kontraste stimmen. Ein Hover-Effekt, der den Hintergrund aufhellt, kann zuvor gut lesbare weiße Schrift unlesbar machen. Ein ausgewählter Filter braucht mehr als einen Wechsel von Grau zu Grün, etwa ein Häkchen und einen programmatisch erkennbaren Auswahlzustand.
Bei Links im Fließtext ist eine dauerhafte Unterstreichung häufig die robusteste Lösung. Sie macht die Funktion unabhängig von der Farbwahrnehmung sichtbar. Kennzeichnen Sie deaktivierte Elemente verständlich und erklären Sie bei Bedarf, warum eine Aktion noch nicht verfügbar ist. Inaktive Komponenten sind von bestimmten Kontrastanforderungen ausgenommen; daraus folgt aber keine Empfehlung für praktisch unsichtbare Beschriftungen. Gerade in mehrstufigen Abläufen müssen Nutzer:innen erkennen können, welche Handlung den nächsten Schritt ermöglicht.
5. Fokus muss sichtbar und auffindbar bleiben
Wer eine Seite mit der Tastatur bedient, braucht eine verlässliche visuelle Ortsangabe. Gestalten Sie den Fokusindikator bewusst als Bestandteil der Marke, beispielsweise als kontrastierenden Ring mit Abstand zur Komponente. Testen Sie ihn auf sämtlichen vorgesehenen Flächen. Eine Kontur, die auf Weiß funktioniert, kann auf einem dunklen Markenbereich verschwinden. Zwei unterschiedlich helle Konturen können helfen, wechselnde Umgebungen abzudecken, müssen aber ebenfalls praktisch geprüft werden.
Die W3C-Übersicht zu den Neuerungen in WCAG 2.2 erläutert „Focus Not Obscured (Minimum)“ auf Stufe AA: Autorenseitig erzeugte Inhalte dürfen das fokussierte Element nicht vollständig verdecken. Eine fixierte Cookie-Leiste ist daher Teil des Tests. Vollständige Sichtbarkeit ist ein sinnvolleres Gestaltungsziel, geht aber über diese Mindestanforderung hinaus. Verwechseln Sie das nicht mit „Focus Appearance“ auf Stufe AAA. Prüfen Sie zusätzlich die Mindestzielgröße von 24 × 24 CSS-Pixeln beziehungsweise die vorgesehenen Ausnahmen; eine sichtbare Kontur vergrößert nicht automatisch die bedienbare Fläche.
6. Fehler verständlich machen, nicht nur rot
Stellen Sie sich eine hypothetische Terminbuchung vor: Nach dem Absenden erscheint ein roter Rahmen um die E-Mail-Adresse, sonst passiert sichtbar nichts. Für Menschen mit eingeschränkter Farbwahrnehmung bleibt unklar, was falsch ist. Auch ein Screenreader erhält durch die Farbe allein keine verwertbare Information. Ergänzen Sie eine konkrete Meldung wie „Bitte ergänzen Sie die Domain nach dem @-Zeichen“, sofern diese Ursache zuverlässig erkannt wurde. Verbinden Sie die Meldung programmatisch mit dem Feld und erhalten Sie bereits eingegebene Daten.
Die WAI Forms Tutorial: User Notifications beschreibt verständliche Fehler- und Erfolgshinweise. Für das Corporate Design bedeutet das: Fehler benötigen eine Kombination aus Text, gegebenenfalls Symbol und Farbe. Legen Sie auch eine kontrastreiche Fehlerzusammenfassung fest, wenn mehrere Felder betroffen sind. Abnahmebeleg ist nicht nur ein Screenshot, sondern ein nachvollziehbarer Ablauf: Fehler auslösen, Meldung wahrnehmen, betroffenes Feld finden, Eingabe korrigieren und erfolgreich fortfahren. Erfolg darf ebenfalls nicht ausschließlich durch einen grünen Farbwechsel signalisiert werden.
7. Typografie ist ein System, keine Font-Auszeichnung
WCAG schreibt keine bestimmte Schriftfamilie vor. Weder eine serifenlose Schrift noch ein spezieller Font macht eine Website allein barrierefrei. Wählen Sie Schriftgrößen, Gewichte und Zeilenlängen so, dass tatsächliche Inhalte gut lesbar bleiben. Prüfen Sie ähnliche Zeichen wie großes I, kleines l und die Ziffer 1 sowie Umlaute, Satzzeichen und längere deutsche Zusammensetzungen. Sehr dünne Schriftschnitte können trotz rechnerisch ausreichendem Farbkontrast in der Praxis schwer erfassbar sein.
Erarbeiten Sie eine begrenzte typografische Skala für Überschriften, Fließtext, Beschriftungen und ergänzende Informationen. Vermeiden Sie es, wichtige Hinweise durch kleine Größe und schwachen Kontrast gleichzeitig zurückzustufen. Relative Einheiten unterstützen flexible Implementierungen, ersetzen aber keine Prüfung. Ebenso wichtig ist die semantische Struktur: Eine große, fette Zeile ist nicht automatisch eine technisch erkennbare Überschrift. Visuelle Hierarchie und Dokumentstruktur sollten zusammenpassen, damit Nutzer:innen sowohl beim Überfliegen als auch mit assistiven Technologien Orientierung finden.
8. Vergrößerung und Reflow gemeinsam prüfen
Text muss sich grundsätzlich bis 200 Prozent vergrößern lassen, ohne dass Inhalt oder Funktion verloren gehen; die im Kriterium genannten Ausnahmen sind zu berücksichtigen. Prüfen Sie nicht nur den Artikeltext, sondern auch Navigation, Buttons, Cookie-Dialoge und Formularhilfen. Ein hypothetischer Button mit fixer Höhe kann bei größerer Schrift eine zweite Zeile abschneiden. Eine belastbare Korrektur lässt die Komponente wachsen und erhält ausreichende Innenabstände, statt die Schrift bei Platzmangel wieder zu verkleinern.
Beim Reflow ist für horizontal geschriebene Inhalte eine Breite von 320 CSS-Pixeln relevant: Lesen soll grundsätzlich ohne gleichzeitiges horizontales und vertikales Scrollen möglich bleiben. Ausnahmen betreffen Inhalte, deren Nutzung oder Bedeutung ein zweidimensionales Layout erfordert. Eine breite Datentabelle kann darunter fallen, nicht automatisch die gesamte Seite. Testen Sie den Inhalt außerhalb solcher Ausnahmen separat. Dokumentieren Sie bei der Abnahme beispielsweise, dass eine Buchungsseite bei schmaler Ansicht alle Beschriftungen zeigt und ihre primäre Aktion erreichbar bleibt.
9. Individuelle Textabstände dürfen nichts zerstören
Das WCAG-Kriterium zu Textabständen verlangt keine allgemeine Gestaltungsvorgabe für Ihre Standardansicht. Es verlangt, dass bei entsprechenden Anpassungen kein Inhalt und keine Funktion verloren gehen: Zeilenhöhe mindestens 1,5-fache Schriftgröße, Absatzabstand mindestens zweifache Schriftgröße, Zeichenabstand mindestens 0,12-fache und Wortabstand mindestens 0,16-fache Schriftgröße. Prüfen Sie diese Einstellungen gemeinsam mit einem geeigneten Teststylesheet oder Werkzeug.
Typische Fehler entstehen durch feste Höhen, abgeschnittenen Überlauf oder zu eng bemessene Karten. Eine hypothetische Produktkarte zeigt nach der Anpassung zwar den Preis, verdeckt aber den Link zu den Produktdetails. Die Lösung liegt meist im Layout: flexible Höhen, sinnvolles Umbrechen und ausreichend Platz zwischen Inhaltsbereichen. Prüfen Sie auch lange Buttontexte und Fehlermeldungen. Ein Screenshot der unveränderten Desktopansicht kann diese Qualität nicht belegen; erforderlich ist ein dokumentierter Test der veränderten Darstellung mit weiterhin erreichbaren Funktionen.
10. Diagramme ohne Farbrätsel gestalten
Ein Diagramm mit mehreren Markenfarben wirkt konsistent, bleibt aber möglicherweise unverständlich, sobald zwei Farbtöne ähnlich wahrgenommen werden. Verwenden Sie direkte Beschriftungen, unterschiedliche Linienmuster, klar unterscheidbare Markierungen oder eine Kombination daraus. Bedeutungstragende grafische Elemente benötigen den jeweils anwendbaren Nicht-Text-Kontrast. Vermeiden Sie es, Informationen ausschließlich über eine Legende zuzuordnen, die nur farbige Punkte enthält.
Die WAI Images Tutorial: Complex Images zeigt, warum komplexe Visualisierungen passende Textalternativen benötigen. Für einen hypothetischen Vergleich von Buchungen über mehrere Monate kann eine kurze Beschreibung den Zweck erklären; eine ergänzende Tabelle stellt genaue Werte bereit. Die Alternative sollte dieselben relevanten Informationen zugänglich machen, ohne eine rein visuelle Beschreibung jedes Details zu erzwingen. Prüfen Sie bei interaktiven Diagrammen außerdem, ob Informationen aus Hover-Tooltips auch per Tastatur und ohne präzise Zeigerbewegungen erreichbar sind.
11. Text über Bildern braucht redaktionelle Regeln
Eine dunkle Schrift auf einem hellen Foto funktioniert nur so lange, wie der relevante Bildausschnitt hell bleibt. Auf Mobilgeräten verändert ein anderer Zuschnitt diese Voraussetzung häufig. Bevorzugen Sie deshalb getrennte Textflächen oder eine ausreichend deckende Hintergrundfläche hinter dem Text. Ein leichter Schatten oder transparenter Verlauf ist kein automatischer Kontrastnachweis. Prüfen Sie alle vorgesehenen Zuschnitte und die ungünstigsten Bereiche hinter den Buchstaben.
Vermeiden Sie Bilder von Text, wenn echter Text die Darstellung leisten kann; die WCAG berücksichtigt dabei bestimmte Ausnahmen, etwa wesentliche Darstellungen. Logos sind nicht mit frei austauschbaren Aktionsüberschriften gleichzusetzen. Für redaktionelle Teams braucht es klare Vorlagen: Wo darf Text stehen, welche Bildvarianten sind zulässig, wann ist eine separate Textfläche nötig? Eine Kampagnengrafik mit eingebautem Rabatttext bleibt beim Zoomen oft unflexibel. Echter HTML-Text lässt sich hingegen vergrößern, umbrechen und an individuelle Darstellungseinstellungen anpassen.
12. Abnahme und laufende Pflege konkret organisieren
Beginnen Sie mit einer Matrix aus Farbrollen, Komponenten, Hintergründen und Zuständen. Ergänzen Sie pro Prüfung den Sollwert, den tatsächlichen Befund und den Nachweis. Für einen Fehlerzustand könnte der Eintrag lauten: Beschriftung lesbar, Feld eindeutig erkennbar, Meldung nicht nur farblich vermittelt und Korrektur möglich. Automatische Prüfungen helfen bei vielen Kontrastproblemen, erfassen aber nicht zuverlässig jede Bildfläche, Interaktion oder Bedeutung. Manuelle Tastatur-, Zoom- und Inhaltstests bleiben notwendig.
Überführen Sie Korrekturen in zentrale Komponenten und redaktionelle Vorgaben statt nur in einzelne Seiten. Prüfen Sie erneut, wenn Farben, Schriften, Bildvorlagen oder Interaktionsmuster geändert werden. WCAG 2.2 AA umfasst alle anwendbaren Kriterien der Stufen A und AA, nicht bloß die hier behandelten Gestaltungsthemen. EN 301 549 ist damit nicht austauschbar, und ein technisches Audit ist kein vollständiger Nachweis rechtlicher Konformität. Zum österreichischen BaFG, das seit 28. Juni 2025 für erfasste Dienstleistungen gilt und nicht automatisch jede Website betrifft, finden Sie die Einordnung im Zensations-Leitfaden zur barrierefreien Website in Österreich.
Häufige Fragen
Müssen wir unsere Markenfarbe ersetzen?
Nicht unbedingt. Häufig kann die Originalfarbe dekorativ erhalten bleiben, während dunklere oder hellere funktionale Varianten Text, Links und Bedienelemente übernehmen. Entscheidend sind geprüfte Kombinationen und klare Einsatzregeln.
Ist schwarze Schrift auf Weiß immer die beste Lösung?
Sie bietet hohen Kontrast, ist aber nicht die einzige geeignete Kombination. Auch farbige Oberflächen können funktionieren. Prüfen Sie Kontrast, Lesbarkeit und sämtliche Zustände, statt eine einzige Farbkombination pauschal vorzuschreiben.
Reicht ein automatischer Kontrastcheck?
Nein. Er ersetzt weder die Bewertung bedeutungstragender Elemente noch Tests mit Tastatur, vergrößerter Schrift und angepassten Abständen. Besonders Bilder, Verläufe und dynamische Zustände benötigen zusätzliche Prüfung.
Welche Schrift macht unsere Website barrierefrei?
Keine Schrift allein. Entscheidend ist das Zusammenspiel aus Zeichenformen, Größe, Gewicht, Kontrast, flexibler Darstellung und semantischer Struktur. Testen Sie reale Inhalte statt ausschließlich typografischer Musterseiten.
Der nächste Schritt: das Designsystem gezielt prüfen
Wenn Sie wissen möchten, welche Ihrer Markenkombinationen digital tragfähig sind, ist ein Barrierefreiheit-Audit von Zensations ein sinnvoller Ausgangspunkt. Bringen Sie Farbpalette, Typografievorgaben, zentrale Komponenten und einen wichtigen Nutzer:innenablauf mit. Das schafft eine konkrete Grundlage für priorisierte Korrekturen. Zensations, 2010 in Wien gegründet, unterstützt über seine Accessibility-Leistungen die Verbindung von Gestaltung und Umsetzung. Ziel sind nachvollziehbare Verbesserungen und überprüfbare Anforderungen, keine pauschale Konformitätsgarantie.
Quellen und redaktioneller Stand
Inhaltlich geprüft am 7. November 2026. Die folgenden Primärquellen bilden die technische Grundlage; WAI-Tutorials erläutern Umsetzungsmöglichkeiten und ersetzen nicht den normativen Standard.
