Kontrast von Farben berechnen
Häufig klagen Menschen darüber, dass die Farben auf Websites schwer zu unterscheiden sind. Dabei liegt dem nicht zwangsläufig eine Sehbeeinträchtigung zugrunde. Schon ungünstige Lichtverhältnisse, etwa bei direkter Sonneneinstrahlung auf das spiegelnde Laptop-Display, erschweren die Lesbarkeit. Medienschaffende haben häufig keine Sehbehinderung, verfügen oft über moderne Geräte und arbeiten bei guten Beleuchtungsverhältnissen. Es ist aber wichtig, bei der Gestaltung nicht von Idealsituationen auszugehen.
Dieser Kontrastrechner hilft: Präzise wird das Kontrastverhältnis und der Lc (Lightness contrast) von zwei Farben berechnet. Für die Bewertung nach WCAG 2 und WCAG 3 können Schriftgröße und -schnitt eingegeben werden.
So funktioniert’s: Betätigen Sie das Farbfeld, um den Farbwähler zu öffnen. Alternativ können Sie die RGB-Werte oder den Hexadezimal-Code eingeben. Über die Schaltflächen können Sie eine Farbpinzette öffnen oder den Hexadezimal-Code kopieren bzw. einfügen.
Kontrastrechner nach WCAG & APCA
WCAG-Kontrastverhältnis
Konformität: WCAG 2 (AA)
Nicht bestanden ....APCA-Kontrast
Konformität: WCAG 3 (Silver)*
Nicht bestanden ....Alle Angaben ohne Gewähr. *Die WCAG 3 sind nicht final veröffentlicht. APCA ist in einer öffentlichen Beta.
Der Kontrastrechner wurde überarbeitet! Entspricht er Ihren Erwartungen? Ihre Rückmeldung ist willkommen unter info@barrierefreies.design.
Designtrends folgend sind einige Webseiten besonders harmonisch und »soft« gestaltet. Die Lesbarkeit wird dabei aus den Augen verloren – mit vielen negativen Folgen. Einigen Menschen sind die Informationen nicht oder kaum zugänglich, die Bedienbarkeit der Webseite leidet darunter. Im schlimmsten Fall wandern Nutzende wieder ab, die Absprungrate schellt nach oben. Die Web Content Accessibility Guidelines enthalten deshalb auch prüfbare Kriterien für Farbkontraste.
WCAG 2.0, 2.1 und 2.2
Konformitätsstufen
Zur Feststellung der Konformität mit den Web Content Accessibility Guidelines ist es wichtig, die zutreffende Konformitätsstufe, das sogenannte Level, zu kennen:
Normaler und großer Text
In der Auswertung stoßen Sie auf die Einteilung in »normalen Text« und »großen Text«. Die WCAG legen in dem Kriterium 1.4.3 zwischen Text und Hintergrund ein bestimmtes Kontrastverhältnis fest, das abhängig von der Schriftgröße variiert. Das Ideal ist schwarze Schrift auf weißem Hintergrund oder umgekehrt. Aber selbst mit den strengsten Kritierien der WCAG bleibt ein großer Spielraum:
Der Nicht-Text-Kontrast
Etwas sperrig klingt der »Nicht-Text-Kontrast«. Er wird im Kriterium 1.4.11 der WCAG beschrieben und betrifft grafische Objekte und Teile der Bedienoberfläche:
WCAG 3.0 – Die Zukunft der Farbkontraste
Das Wichtigste zuerst: Die Version 3 der WCAG hat den Status »Working Draft«, ist noch nicht veröffentlicht und noch weniger bereits Teil von Gesetzen oder Standards. Die Veröffentlichung war einst für 2023 geplant, inzwischen geht man von September 2025 aus. Große Änderungen bezüglich der Farbkontraste gelten als sehr wahrscheinlich.
Konformitätsstufen
Anstelle der Levels A, AA und AAA in WCAG 2.x führt WCAG 3.0 die Levels Bronze, Silver und Gold ein. Diese Levels repräsentieren unterschiedliche Stufen der Zugänglichkeit und bieten eine deutlichere und flexiblere Struktur für die Einhaltung der Richtlinien.
Accessible Perceptual Contrast Algorithm (APCA)
Der Algorithmus in den WCAG 2 berechnet den Kontrast recht simpel, indem er die Helligkeit der beiden Farben linear miteinander vergleicht. Aber eine um 20 Prozent reduzierte Helligkeit bedeutet nicht unbedingt, dass Menschen diese Farbe um 20 Prozent dunkler wahrnehmen. Der Accessible Perceptual Contrast Algorithm liefert eine genauere Einschätzung der menschlichen Wahrnehmung. Dadurch sind Farbkombinationen konform, die in der Praxis gut funktionieren, mit WCAG 2 jedoch durchfallen – und umgekehrt:
Ratsam ist, den APCA heute schon zu berücksichtigen. Zum einen, weil es wahrscheinlich die Zukunft ist, zum anderen – und darum geht es –, weil es Barrieren besser vermeidet. Besonders eindringlich empfiehlt es sich bei Gestalterungsmaterial wie einem Logo, das man später nicht so leicht ändern kann. Daher ist der APCA zur Berechnung des Lc (Lightness contrast) in diesem Kontrastrechner vorab integriert und prüft die Konformität mit der Stufe Silver. Damit geht dieser Kontrastrechner voraus. Trotzdem sollte die Konformität mit den WCAG 2 als Teil geltender Standards und Gesetze sichergestellt werden.
Wenn das Farbkonzept auf Barrierefreiheit abgestimmt ist …
… dann muss es noch barrierefrei angewendet werden. Farben dürfen nicht der alleinige Informationsträger sein (WCAG-Kriterium 1.4.1). So werden in Bedienoberflächen oft die Farben Rot oder Grün verwendet, um valide oder invalide Formulareingaben zu markieren. Grundsätzlich ist es ratsam, semantisch-passende Farben einzusetzen. Aber ohne einer zusätzlichen, schriftlichen Meldung ist diese Information für Menschen mit einer Farbenfehlsichtigkeit schlimmstenfalls gar nicht wahrnehmbar. Diese Menschen haben Schwierigkeiten, rote und grüne Gestaltungselemente voneinander zu trennen. Das Gestaltungsmaterial kann mit verschiedenen Farbsehschwächen simuliert werden:
Auch gesunde Sehorgane reagieren auf Rot-Grün-Kontraste empfindlich. In selber Helligkeit der Farben kann ein Flimmern vor den Augen begünstigt werden. Komplementärkontraste sollten insgesamt mit Vorsicht eingesetzt werden, weil sie oft als unangenehm empfunden werden.
Dieser Kontrastrechner hilft, Zeit zu sparen?
Sehr gut!
Ich würde mich darüber freuen, wenn Sie die Weiterentwicklung unterstützen, damit dieses Werkzeug auch weiterhin allen Menschen zur Verfügung steht. Ohne Bannerwerbung, ohne externe Tracker, ohne Anmeldung, ohne Kosten.