🧾 SOP 19: Stelle Farbkontraste sicher

So sorgst du für Lesbarkeit und erfüllst eine der wichtigsten WCAG-Anforderungen
📄 SOP als PDF downloaden ⚡ Quick Card downloaden 📚 Zum Inhaltsverzeichnis

Wer sollte diese SOP lesen?

📊 Projektleitung | 👔 Geschäftsführung | 🖥️ IT | 🧑‍⚖️ Recht

Überblick zu SOP 19

Eckdaten dieser SOP
📌 Was du hier machstDu stellst sicher, dass alle Texte, UI-Elemente und interaktiven Komponenten einen ausreichenden Farbkontrast zum Hintergrund aufweisen – entsprechend den Anforderungen der WCAG 2.1.
🧠 VoraussetzungDu arbeitest an Design, Frontend, Content oder QA digitaler Produkte und möchtest gesetzeskonforme, lesbare Farben verwenden.
⏱️ Dauer⏱ Initialaufwand: 2–4 Stunden / ♻️ Pflegeaufwand: ca. 30 Min. bei Design-Änderungen
🎨 Gilt fürAlle digitalen Produkte (Websites, Apps, E-Mails, PDFs, Portale, Shops).
🧷 Gesetzlich verpflichtend?✅ Ja – laut EAA, BFSG und WCAG verpflichtend
📍 Nächster Schritt→ SOP 20: Videos zugänglich machen

Am Ende hast du eine dokumentierte, barrierefreie Farbpalette und einen festen Prozess, der sicherstellt, dass alle deine digitalen Inhalte die gesetzlich geforderten Kontrastwerte (mindestens WCAG 2.1 Level AA) erfüllen.

Du legst deine Farbpalette in demselben Ordner wie alle deine Dokumentationen und Richtlinien zur Barrierefreiheit ab, deinem Barrierefreiheitsordner.

  • ⏱ Initialaufwand: 2–4 Stunden
  • ♻️ Pflegeaufwand: ca. 30 Min. bei Design-Änderungen
  • DU (Projektleitung, EAA-Verantwortliche:r): stößt den Prozess an, prüfst die Umsetzung und dokumentierst die Ergebnisse.
  • UX / Design: ist verantwortlich für die Definition der barrierefreien Farbpalette und deren Anwendung im Design-System (Figma, Sketch etc.).
  • Entwicklung / IT: setzt die Farbwerte im Code korrekt um und stellt sicher, dass keine systemseitigen Abweichungen entstehen.
  • Content / Marketing: achtet bei der Erstellung von Inhalten (z. B. Teaser-Grafiken, Social-Media-Posts) auf die Einhaltung der Kontraste.

🕓 Wann musst du das machen?

  • Bei der initialen Erstellung eines Designs oder Corporate Designs.
  • Vor dem Launch einer neuen Website, App oder eines neuen Features.
  • Wenn du intern oder von Kund:innen Feedback zur schlechten Lesbarkeit bekommst.
  • Als regelmäßiger Check bei Audits und Qualitätsprüfungen.

⚖️ Welches Gesetz verlangt das?

  • EAA & BFSG
  • EN 301 549 (EU-Norm für barrierefreie IKT-Produkte)
  • WCAG 2.1 Level AA – als faktischer Standard, insbesondere die Erfolgskriterien:
  • 1.4.3 Contrast (Minimum)
  • 1.4.11 Non-text Contrast

Der Prozess im Detail

🧭 Der Prozess im Detail

0 von 5 Schritten erledigt0 %
🟥 Schritt 1: Verstehe die Anforderungen – Was bedeuten die Zahlen aus der WCAG überhaupt?

Die WCAG definieren klare Kontrastverhältnisse. Kontrastverhältnisse sagen, wie stark sich Text oder Elemente vom Hintergrund abheben . Und da gilt die einfache Regel: Je höher der Kontrast, desto besser lesbar ist etwas – auch für Menschen mit Sehschwäche.

Für dich sind vor allem diese Werte aus Level AA entscheidend:

  • 4,5:1 für normalen Text: Das ist der Standard für Fließtext, Menüpunkte und die meisten Textinhalte.
  • 3:1 für großen Text: Gilt für Text, der mindestens 18pt (ca. 24px) groß ist oder 14pt (ca. 19px) und fett.
  • 3:1 für grafische Bedienelemente und UI-Komponenten: Das betrifft die Ränder von Formularfeldern, Schieberegler, Icons und den Zustand von Buttons oder Links (z. B. der sichtbare Fokus-Indikator ).

Gleichzeitig heißt das auch: Je höher das Kontrastverhältnis, desto stärker unterscheidet sich die Schrift (oder ein Element) vom Hintergrund – also besser sichtbar und lesbar. So ist 7:1 ein sehr hoher Kontrast (z. B. schwarze Schrift auf weißem Hintergrund), während 2:1 oder weniger schlecht lesbar und damit natürlich nicht barrierefrei ist.

🟧 Schritt 2: Nutze Werkzeuge und messe den Kontrast

Falls du dich schon gefragt hast, wie in Gottes Namen du das messen sollst – keine Sorge. Du musst die Farben nicht schätzen. Nutze kostenlose und einfache Tools, um exakte Werte zu erhalten.

Am einfachsten ist der WebAIM Contrast Checker : Du gibst Vorder- und Hintergrundfarbe ein (z. B. in HEX wie #333333 ) und siehst sofort, ob der Kontrast den Anforderungen entspricht. Falls du die genauen Farben nicht kennst, nutze eine Pipette – viele Browser-Erweiterungen oder Entwicklertools haben so etwas. Das geht in zwei einfachen Schritten:

  • Identifiziere die Farben: Nutze eine Pipette (im Browser oder im Tool integriert), um die exakten Farbwerte (HEX-Codes, z. B. #333333) von Text und Hintergrund auf deiner Website zu ermitteln.‘
  • Vergleiche nun die Werte: Gib die beiden Farbwerte in den Checker ein und prüfe, ob das Ergebnis die Anforderungen für WCAG AA erfüllt.

Alternativ kannst du auch direkt im Browser testen. Chrome, Firefox und Edge bieten eine Kontrastprüfung im Entwicklermodus : Rechtsklick auf ein Element, „Untersuchen“ auswählen, und im Styles-Bereich findest du Infos zu Farben und Kontrastverhältnis.

Noch schneller geht’s mit Barrierefreiheits-Erweiterungen wie WAVE oder axe DevTools . Sie prüfen die ganze Seite auf einmal und zeigen dir, wo Kontrastprobleme auftreten.

Nicht vergessen: Nutzerpräferenzen berücksichtigen

Viele Nutzer passen ihre Darstellung individuell an. Auch das solltest du testen.

  • Im Dark Mode (Media Feature: prefers-color-scheme ) sehen Farben oft anders aus. Prüfe, ob dein Design auch dann noch lesbar bleibt.
  • Manche Nutzer fordern über prefers-contrast extra hohen Kontrast – z. B. bei Sehschwächen oder auf älteren Displays.
  • Unter Windows gibt es Zwangsfarben-Modi („Forced Colors“) , bei denen eigene Farbschemata vom System erzwungen werden. Deine Inhalte müssen auch dann noch funktionieren – selbst wenn deine Farben komplett ersetzt werden.

Bonus: So sehen andere deine Seite

Moderne Browser-Entwicklertools bieten Simulationen für Farbsehschwächen wie Rot-Grün-Blindheit oder komplette Farbenblindheit. Damit bekommst du ein realistisches Bild davon, wie deine Farbwahl wirkt. Für schnelle Tests kannst du außerdem CSS-Filter wie grayscale(1) oder blur(2px) einsetzen, um farblose oder unscharfe Sicht zu simulieren.

🟨Schritt 3: Wiederhole den Prozess und prüfe alle relevanten Elemente

Gehe nun deine Website systematisch durch und prüfe alle Elemente, bei denen Farbe eine Rolle für die Informationsvermittlung spielt. Das sind:

  • Texte: Fließtext, Überschriften, Teaser-Texte.
  • Links: Standard-Links, besuchte Links, Hover-Zustand.
  • Buttons: Text auf dem Button, Hintergrundfarbe des Buttons.
  • Formularfelder: Beschriftungen (<label>), Ränder der Eingabefelder, Platzhaltertexte.
  • Icons & Grafiken: Wichtige Symbole, die eine Funktion haben (z. B. Warenkorb-Icon, Lupe für Suche).
  • Fokus-Indikator: Der Rahmen, der erscheint, wenn du mit der Tab-Taste navigierst.
  • Warn- & Erfolgsmeldungen: Der Text in den Meldungen und deren Hintergrundfarbe.
🟩 Schritt 4: Definiere eine barrierefreie Farbpalette und behebe Verstöße

Das Ziel ist nicht, dein Branding zu zerstören, sondern es zugänglich zu machen. Und das heißt:

  • Dokumentiere die Markenfarben: Liste alle Primär- und Sekundärfarben deines Corporate Designs auf.
  • Erstelle eine Kontrast-Matrix: Lege eine Tabelle an, die zeigt, welche Farbkombinationen (Vordergrund/Hintergrund) die WCAG-Anforderungen erfüllen und welche nicht.
  • Definiere zugängliche Alternativen: Falls deine Haupt-Markenfarbe z. B. auf Weiß einen zu geringen Kontrast hat, definiere eine dunklere, zugängliche Variante nur für Text (z. B. Brand-Blue-Text statt Brand-Blue-Light).
  • Verankere die Palette: Dieses Dokument ist ab sofort die einzige Referenz für alle neuen Designs und Inhalte.
🟦 Schritt 5: Verankere den Prozess im Team, um in Zukunft Fehler zu vermeiden

Oft entstehen Kontrastfehler nicht im Design, sondern durch nachträgliche Änderungen im CMS oder Code. Darum musst du jetzt dafür sorgen, dass alle im Team die Regeln für barrierefreies Design kennen. Das machst du folgendermaßen:

  • Teile die neue Farbpalette mit allen relevanten Abteilungen (Marketing, Entwicklung).
  • Integriere die Palette ins Design-System (Figma, Sketch, Adobe XD).
  • Mache Kontrast-Checks zu einem festen Bestandteil deiner QA-Prozesse vor jedem Go-live.
  • Formuliere eine klare Anweisung: „Textfarben dürfen nur aus der definierten, barrierefreien Palette verwendet werden.“

✅ Ergebnis

Fertig! Du hast jetzt:

  • Klarheit darüber, welche Farbkontraste gesetzlich gefordert sind.
  • Eine vollständige Liste aller problematischen Elemente auf deiner Website.
  • Eine dokumentierte und freigegebene, barrierefreie Farbpalette.
  • Den Prozess zur Sicherstellung der Lesbarkeit fest im Team verankert.
  • Eine der wichtigsten und häufigsten Barrieren auf deiner Website behoben.

💬 Copy-Paste-Baustein

Kontrastregeln für barrierefreie Farben

Hier ist ein Vorschlag für einen Copy-Paste-Baustein, den du beispielsweise in euren Styleguide, eure Design-Guidelines oder in die Kommunikation mit Content-Erstellern und Entwicklern einfügen kannst:

Betreff: Wichtig: Farben müssen für alle sichtbar sein!

Hallo lieber [Name],

Um sicherzustellen, dass unsere Inhalte für alle Nutzer – insbesondere für Menschen mit Sehschwäche – gut lesbar sind, müssen wir bei der Farbwahl stets auf ausreichende Kontraste achten. Dies ist auch eine gesetzliche Anforderung (WCAG AA).

Bitte beachte folgende Regeln für alle Texte und wichtigen Bedienelemente :

🎯 Mindestkontrast-Verhältnisse (WCAG AA):

  • 4,5:1 für normalen Text (Schriftgröße unter 18pt/24px oder 14pt/19px fett).
  • 3:1 für großen Text (mindestens 18pt/24px oder 14pt/19px fett).
  • 3:1 für grafische Bedienelemente (z.B. Icon-Ränder, Schieberegler, Fokus-Indikatoren, Zustände von Buttons).

🛠 So prüfst du den Kontrast:

Nutze Tools wie den

  • WebAIM Contrast Checker oder die Browser-Entwicklertools (Rechtsklick > Untersuchen > Farben-Tab). Gib einfach die HEX-Codes von Vorder- und Hintergrundfarbe ein.

✅ Wichtige Hinweise für die Anwendung:

  • Verwende ausschließlich Farben aus unserer definierten, barrierefreien Farbpalette . Diese Palette wurde so entwickelt, dass sie die nötigen Kontrastanforderungen erfüllt. [Link zur Farbpalette / Styleguide hier einfügen]
  • Achte besonders auf Links, Buttons, Formularfelder und Icons – ihre Funktion muss immer klar erkennbar sein, auch im Hover- oder Fokus-Zustand.
  • Denke an Nutzerpräferenzen : Prüfe, wie deine Farben im Dark Mode oder unter Zwangsfarben-Modi (High Contrast Mode unter Windows) wirken.

Fragen und Antworten (FAQ ) zu dieser SOP

Zu SOP 20 → 📚 Zurück zum Inhaltsverzeichnis

Fragen und Antworten (FAQ) zu dieser SOP

Wie beeinflussen Textgröße und Schriftart das erforderliche Kontrastverhältnis?

Das ist ein entscheidender Punkt! Die Größe des Textes hat direkten Einfluss auf das nötige Kontrastverhältnis nach WCAG.

  • Normaler Text (unter 18pt / ca. 24px oder 14pt / ca. 19px und nicht fett): Hier gilt das strengere Verhältnis von 4,5:1 . Kleine Schrift ist schwerer zu lesen, daher braucht sie einen stärkeren Kontrast zum Hintergrund.
  • Großer Text (mindestens 18pt / ca. 24px oder 14pt / ca. 19px und fett): Für diesen Text reicht ein Kontrast von 3:1 aus. Größerer Text ist von Natur aus besser erkennbar, selbst bei geringerem Kontrast.

Die Schriftart selbst hat zwar keinen direkten WCAG-Wert, aber sie spielt eine große Rolle für die Lesbarkeit. Serifenlose Schriftarten (wie Arial, Helvetica) sind oft besser lesbar als Serifenschriftarten (wie Times New Roman), besonders in kleineren Größen. Auch die Laufweite (Abstand zwischen den Buchstaben) und Zeilenhöhe beeinflussen die Lesbarkeit. Halte dich an gut lesbare, gängige Schriftarten.

Können reine Grafiken (Bilder ohne Text) Kontrastprobleme haben?

Kurze Antwort: Ja!

  • Informative Grafiken: Wenn eine Grafik eine wichtige Information visuell darstellt (z.B. ein Diagramm, eine Karte, ein Piktogramm), müssen sich die wichtigen visuellen Elemente voneinander und vom Hintergrund ausreichend abheben. Die WCAG fordert hier ebenfalls ein Kontrastverhältnis von mindestens 3:1 für die relevanten Teile der Grafik. Das gilt zum Beispiel für die Linien in einem Liniendiagramm oder die Segmente eines Tortendiagramms, wenn deren Farbe der einzige Informationsträger ist.
  • Icons: Ein Icon, das eine Funktion darstellt (z.B. ein Pfeil für „zurück“, ein Lupe für „suchen“), muss sich mit 3:1 vom Hintergrund abheben.
  • Rein dekorative Grafiken sind davon ausgenommen, da sie keine Informationen vermitteln.
Was ist, wenn ich transparente Elemente oder Verläufe in meinem Design verwende? Wie messe ich hier den Kontrast?

Das ist knifflig, aber machbar:

  • Transparenz: Bei transparenten Elementen musst du den Kontrast zum darunterliegenden Hintergrund messen, der tatsächlich sichtbar ist. Das heißt, du musst die resultierende Farbe berechnen, die entsteht, wenn die transparente Farbe über dem Hintergrund liegt. Viele professionelle Designtools oder die Entwicklertools im Browser können diese resultierenden HEX-Werte anzeigen oder du musst sie manuell berechnen. Miss dann den Kontrast zwischen dem Text und dieser gemischten Hintergrundfarbe.
  • Farbverläufe: Bei Verläufen gibt es keine einzelne Messung. Du musst den Kontrast des Textes zu den Extrempunkten des Verlaufs messen, also zu den hellsten und dunkelsten Stellen des Hintergrunds, auf denen der Text platziert ist. Im Idealfall sollte der Kontrast über den gesamten Verlauf den Anforderungen entsprechen. Wenn der Text über einem Verlauf liegt, der von hell zu dunkel wechselt, musst du sicherstellen, dass der Text sowohl auf dem hellsten als auch auf dem dunkelsten Abschnitt lesbar ist. Manchmal muss der Text einen zusätzlichen Schatten oder eine Umrandung erhalten, um über dem gesamten Verlauf lesbar zu bleiben.
Meine Corporate Design Farben erfüllen die Kontrastanforderungen nicht. Muss ich jetzt mein ganzes Branding ändern?

Nein, nicht unbedingt dein ganzes Branding, aber du musst Anpassungen für digitale Inhalte vornehmen. Die gute Nachricht ist: Es gibt oft kreative Lösungen, ohne die Markenidentität komplett aufzugeben:

  • Textfarben anpassen: Du kannst spezifische, dunklere (oder hellere) Varianten deiner Markenfarben definieren, die nur für Text verwendet werden, während die Originalfarben weiterhin für große Flächen, Grafiken oder dekorative Elemente genutzt werden können.
  • Hintergründe anpassen: Manchmal ist es einfacher, den Hintergrund leicht aufzuhellen oder abzudunkeln, um den Kontrast zu erfüllen.
  • Alternative Anwendungen: Wenn eine Markenfarbe wirklich nicht als Textfarbe funktioniert, überlege, sie eher für grafische Akzente zu nutzen, die keine essenziellen Informationen tragen und somit auch nicht den Kontrastregeln unterliegen.
  • Schatten/Umrisse: In seltenen Fällen, wo es keine andere Lösung gibt, kann ein dezenter Textschatten oder eine Umrandung helfen, den Kontrast zu erhöhen. Dies sollte jedoch die Ausnahme sein.

Das Ziel ist es, zugänglich zu sein , nicht das Branding zu zerstören. Eine kluge Anpassung der Farbpalette für digitale Medien ist oft der Weg.

Warum ist der Fokus-Indikator so wichtig für den Kontrast?

Der Fokus-Indikator ist absolut entscheidend für die Barrierefreiheit, besonders für Menschen, die nicht die Maus nutzen können (z.B. über Tastatur, Sprachsteuerung oder Schalter).

  • Wenn du mit der Tab-Taste durch eine Website navigierst, muss immer klar erkennbar sein, welches Element gerade aktiv ist (z.B. welcher Link oder Button ausgewählt ist). Der Fokus-Indikator (oft ein Rahmen um das Element) sorgt für diese visuelle Rückmeldung.
  • Wenn dieser Indikator keinen ausreichenden Kontrast zum Hintergrund oder zu den umgebenden Elementen hat (mindestens 3:1), wissen Nutzer nicht, wo sie sich auf der Seite befinden oder welches Element sie aktivieren werden. Das führt zu Frustration und Unbenutzbarkeit.

Es ist eine der häufigsten Barrieren auf Websites, die oft übersehen wird. Teste ihn unbedingt gründlich mit der Tastatur!