Farbkontrast verstehen

1. Was ist Farbkontrast?

Der Farbkontrast misst den Unterschied in der wahrgenommenen Helligkeit (Leuchtdichte) zwischen zwei Farben. Er wird als Verhältnis von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast) ausgedrückt. Dieses Verhältnis bestimmt, wie leicht Text und UI-Elemente von ihren Hintergründen unterschieden werden können.

Im Gegensatz zum einfachen Farbunterschied berücksichtigt das Kontrastverhältnis, wie das menschliche Auge Helligkeit wahrnimmt. Zwei Farben können unterschiedlich aussehen, aber ähnliche Leuchtdichtewerte haben, was zu schlechtem Kontrast führt. Beispielsweise sehen gesättigtes Rot (#FF0000) und gesättigtes Grün (#00FF00) deutlich unterschiedlich aus, aber beide haben ähnliche Helligkeit.

2. Warum Kontrast wichtig ist

Guter Farbkontrast ist essentiell für Barrierefreiheit und Benutzerfreundlichkeit. Er betrifft nicht nur Menschen mit Sehbehinderungen, sondern jeden in verschiedenen Situationen. Schlechter Kontrast kann Inhalte für Millionen von Benutzern völlig unlesbar machen.

Wer von gutem Kontrast profitiert:

• ~2,2 Milliarden Menschen weltweit haben Sehbehinderungen (WHO, 2023)
• 8% der Männer und 0,5% der Frauen haben eine Form von Farbenblindheit
• Jeder erfahrt eine verringerte Kontrastempfindlichkeit bei hellem Sonnenlicht oder schlechten Lichtverhältnissen
• Altersbedingte Sehveranderungen betreffen fast jeden über 40 (Presbyopie)

3. WCAG-Richtlinien erklärt

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für Web-Barrierefreiheit. WCAG 2.2 definiert spezifische Kontrastverhältnisse, um sicherzustellen, dass Inhalte für Menschen mit mäßig eingeschränktem Sehvermogen oder Farbsehschwäche wahrnehmbar sind.

Stufe AA (Mindeststandard)

Stufe AA ist die Grundlage für die meisten Organisationen und ist in vielen Ländern gesetzlich vorgeschrieben. Sie erfordert einen Kontrast von 4,5:1 für normalen Text und 3:1 für großen Text. Diese Stufe berücksichtigt Benutzer mit einer Sehscharfe von 20/40, der Grenze für Fuhrerscheine in den meisten Ländern.

Stufe AAA (Erweiterte Barrierefreiheit)

Stufe AAA bietet erweiterte Barrierefreiheit mit einem Kontrast von 7:1 für normalen Text und 4,5:1 für großen Text. Diese Stufe wird für Regierungswebsites, Gesundheitsanwendungen und Inhalte empfohlen, die sich an altere Erwachsene oder Benutzer mit Sehbehinderungen richten.

4. Textgroßenkategorien

WCAG definiert unterschiedliche Kontrastanforderungen basierend auf der Textgröße, da größerer Text grundsätzlich leichter zu lesen ist. Das Verständnis dieser Schwellenwerte ist entscheidend für die Anwendung der richtigen Standards.

Normaler Text

Normaler Text wird als Text definiert, der kleiner als 18pt (24px) oder kleiner als 14pt fett (ungefähr 18,66px fett) ist. Dies umfasst Fließtext, Bildunterschriften, Formularbeschriftungen und den Großteil des Schnittstellentexts. Normaler Text erfordert die höchsten Kontrastverhältnisse: 4,5:1 für AA und 7:1 für AAA.

Großer Text

Großer Text ist 18pt (24px) oder großer, oder 14pt (18,66px) fett oder großer. Dies umfasst typischerweise Überschriften (h1-h3), Schaltflächen und hervorgehobenen Text. Großer Text hat gelockerte Anforderungen, da die erhöhte Große den geringeren Kontrast ausgleicht: 3:1 für AA und 4,5:1 für AAA.

5. Wie der Kontrast berechnet wird

Das Verständnis der Kontrastberechnung hilft Ihnen vorherzusagen, welche Farbkombinationen funktionieren werden. Der Prozess beinhaltet die Umwandlung von Farben in Leuchtdichtewerte und deren Vergleich.

Schritt 1: In sRGB konvertieren

Farben werden zunächst auf sRGB-Werte zwischen 0 und 1 normalisiert, indem jede RGB-Komponente durch 255 geteilt wird. Dann wird eine Gammakorrektur angewendet, um zu berücksichtigen, wie Displays Farben darstellen. Werte <= 0,03928 werden durch 12,92 geteilt; größere Werte verwenden die Formel ((Wert + 0,055) / 1,055) ^ 2,4.

Schritt 2: Leuchtdichte berechnen

Die Leuchtdichte wird mit gewichteten Koeffizienten berechnet, die die Empfindlichkeit des menschlichen Auges widerspiegeln: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Beachten Sie, dass Grün am meisten zur wahrgenommenen Helligkeit beiträgt (71,52%), während Blau am wenigsten beiträgt (7,22%). Deshalb ist reiner blauer Text schwerer zu lesen als grüner.

Schritt 3: Verhältnis berechnen

Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die Leuchtdichte der helleren Farbe und L2 die Leuchtdichte der dunkleren Farbe ist. Der 0,05-Offset verhindert Division durch Null und berücksichtigt Umgebungslicht. Das Ergebnis reicht von 1:1 (identisch) bis 21:1 (Schwarz und Weiß).

6. UI-Elemente & Anforderungen

WCAG 2.2 führte Kontrastanforderungen für Benutzeroberflachenkomponenten und grafische Objekte ein, nicht nur für Text. Verschiedene Elemente haben unterschiedliche Anforderungen basierend auf ihrer Funktion und Wichtigkeit.

Textinhalt

Der gesamte Text muss die Kontrastanforderungen basierend auf der Große erfüllen: 4,5:1 für normalen Text (AA) oder 7:1 (AAA) und 3:1 für großen Text (AA) oder 4,5:1 (AAA). Dies umfasst Fließtext, Überschriften, Links, Schaltflachenbeschriftungen, Formularbeschriftungen, Fehlermeldungen und Platzhaltertext.

UI-Komponenten (WCAG 2.2)

Interaktive Elemente erfordern einen Kontrast von 3:1 gegenüber benachbarten Farben. Dies umfasst Formularfeldrahmen, Kontrollkästchen- und Optionsfeldumrisse, Schaltflachengrenzen, Fokusindikatoren und alle visuellen Indikatoren, die den Status oder die Grenze einer Komponente anzeigen.

Symbole & Grafiken

Informative Grafiken erfordern einen Kontrast von 3:1, wenn sie Bedeutung vermitteln, die nicht durch Text verfügbar ist. Dies umfasst Symbole, die den Status anzeigen (Warnung, Fehler, Erfolg), Datenvisualisierungen und Infografiken. Rein dekorative Grafiken sind von diesen Anforderungen ausgenommen.

7. Ihre Farben testen

Effektive Kontrasttests gehen über die bloße Überprufung von Verhältnissen hinaus. Ein systematischer Ansatz stellt sicher, dass Ihre Farben für alle Benutzer unter allen Bedingungen funktionieren.

Kontrastverhältnisse prüfen

Verwenden Sie unser Kontrast-Checker-Tool, um zu überprüfen, ob Ihre Text- und Hintergrundkombinationen die WCAG-Anforderungen erfüllen. Testen Sie jede Farbkombination in Ihrem Design, einschließlich Hover-Zustände, Fokus-Zustände, deaktivierte Zustände und Fehlerzustande.

Auf Farbenblindheit testen

Verwenden Sie unsere Farbenblindheitssimulationsfunktion, um zu sehen, wie Ihr Design für Benutzer mit Protanopie, Deuteranopie und Tritanopie aussieht. Stellen Sie sicher, dass kritische Informationen nicht nur durch Farbe vermittelt werden—fügen Sie Symbole, Muster oder Textbeschriftungen hinzu.

Unter realen Bedingungen testen

Betrachten Sie Ihr Design auf verschiedenen Geräten und bei unterschiedlichen Lichtverhältnissen. Testen Sie auf hochauflösenden und Standardbildschirmen. Versuchen Sie, bei hellem Sonnenlicht und in dunklen Räumen zu betrachten. Verwenden Sie die Barrierefreiheitsfunktionen Ihres Telefons, um mit aktiviertem Graustufenmodus zu testen.

8. Best Practices

Das Befolgen dieser Best Practices hilft sicherzustellen, dass Ihre Designs für ein möglichst breites Publikum zugänglich sind und gleichzeitig visuell ansprechend bleiben.

Tun Sie:

• Testen Sie Farben früh im Designprozess, nicht erst vor dem Start
• Erstellen Sie von Anfang an eine Farbpalette mit Barrierefreiheit im Hinterkopf
• Verwenden Sie mehrere Hinweise für wichtige Informationen (Farbe + Symbol + Text)
• Dokumentieren Sie Ihre barrierefreien Farbkombinationen für eine konsistente Nutzung in Ihrem Team
• Streben Sie AAA-Konformität an, wenn möglich, insbesondere für kritische Inhalte

Vermeiden Sie:

• Verlassen Sie sich nicht ausschließlich auf Farbe zur Bedeutungsvermittlung (verwenden Sie auch Symbole, Muster oder Text)
• Verwenden Sie hellgrauen Text für "weniger wichtige" Inhalte—er muss trotzdem lesbar sein
• Nehmen Sie nicht an, dass Ihre Markenfarben barrierefrei sind—überprüfen Sie immer
• Vergessen Sie nicht Text über Bildern oder Farbverläufen—testen Sie die Bereiche mit dem geringsten Kontrast