Das Kontrastverhältnis ist ein Maß für den Helligkeitsunterschied zwischen Textfarbe und Hintergrundfarbe auf einer Skala von 1:1 bis 21:1. Nach dem WCAG-2.2-Erfolgskriterium 1.4.3 benötigt Text in normaler Größe ein Verhältnis von mindestens 4.5:1, großer Text mindestens 3:1. Geringer Kontrast macht Inhalte für sehbehinderte Menschen unlesbar.
Das Kontrastverhältnis wird aus der relativen Leuchtdichte zweier Farben berechnet; zwischen reinem Weiß und reinem Schwarz beträgt es 21:1. Das WCAG-2.2-Erfolgskriterium 1.4.3 (Stufe AA) verlangt mindestens 4.5:1 für normalen Text und mindestens 3:1 für großen Text; auf Stufe AAA liegen die Schwellen höher. Das Kriterium gilt für alle lesbaren Inhalte, einschließlich Fließtext, Button-Beschriftungen und Formulartexten; Logos und rein dekorativer Text sind ausgenommen. In der Praxis entstehen Kontrastprobleme meist durch Markenfarben: hellgrauer Fließtext, pastellfarbene Buttons auf weißem Grund und Text auf Fotos sind die häufigsten Verstöße.
Zur Messung eignen sich die Entwicklertools des Browsers, kostenlose Online-Tools wie der WebAIM Contrast Checker oder automatische Barrierefreiheits-Scanner. Geringer Kontrast betrifft nicht nur sehbehinderte Menschen, sondern jeden, der bei hellem Sonnenlicht auf ein Handydisplay schaut; die Korrektur nützt also allen. Die dauerhafte Lösung liegt in der Farbpalette des Designsystems: Textfarben abdunkeln oder Hintergründe aufhellen genügt meist. Werkzeuge mit Hochkontrastmodus auf Nutzerseite bieten zusätzlichen Komfort, ersetzen aber nicht die Korrektur im Quellcode. Automatisches Scannen listet Verstöße pro Seite und Element auf und macht die Behebung planbar.
Häufig gestellte Fragen
Wie misst man das Kontrastverhältnis?
Am praktischsten sind fertige Werkzeuge: Die Entwicklertools von Chrome und Firefox zeigen das Kontrastverhältnis beim Untersuchen eines Textelements, und kostenlose Seiten wie der WebAIM Contrast Checker berechnen das Verhältnis aus zwei Farbcodes. Für eine seitenweite Prüfung durchsuchen automatische Barrierefreiheits-Scanner alle Seiten und listen Texte unterhalb der 4.5:1-Schwelle elementgenau auf. Eine manuelle Berechnung ist nicht nötig.
Gilt die 4.5:1-Regel für jeden Text?
Nein. Die Schwelle von 4.5:1 gilt für Text in normaler Größe; für großen Text (etwa ab 24 Pixel oder ab etwa 19 Pixel in Fettschrift) genügt 3:1. Logos, Markennamen und rein dekorativer Text sind ausgenommen, ebenso deaktivierte Bedienelemente. Für Websites mit Ziel AAA gelten höhere Schwellen. Im Zweifel ist ein Wert über 4.5:1 die sichere Wahl.
Dieser Inhalt dient nur zur Information und stellt keine Rechtsberatung dar.