Skip to main content

Farbkontrast-Check

Farbkontraste sind eine sehr wichtige Komponente, wenn es darum geht, ein Web zu schaffen, das für alle Nutzer leicht zugänglich ist. Um den Text auf Ihrer Website gut lesbar zu machen, sollte der Kontrast zwischen dem Text und dem Hintergrund hoch sein. Verwenden Sie diesen Farbkontrast-Check, um festzustellen, ob Ihre Farbkombinationen barrierefrei sind oder nicht.

Text color

#

Background color

#

Ergebnis — Verhältnis:

AA+

Normale Textgröße

AAA+

Normale Textgröße

AA+

Große Textgröße

AAA+

Große Textgröße

Farbkontrast-Check

Der Check verwendet die WCAG 2.0-Formel für den Farbkontrast. Zur Einhaltung der Stufe AA sollte Ihr Text ein Kontrastverhältnis von 4,5:1 aufweisen. Für die Einhaltung der Stufe AAA sollte Ihr Text ein Kontrastverhältnis von 7:1 haben. Wenn Ihr Text groß ist (18+ Punkt oder 14 Punkt, wenn der Text fett ist), kann Ihr Verhältnis 3:1 für die Einhaltung der Stufe AA und 4,5:1 für die Stufe AAA sein.

Siteimprove Toolkit

Das Siteimprove Toolkit. Mit dieser Reihe von kostenlosen Tools können Sie sofort Ihr digitales Potenzial ausschöpfen.

FAQ zum Farbkontrast-Prüfer

Farbkontrast ist der Helligkeitsunterschied zwischen einer Schrift (oder einem anderen Element) im Vordergrund und dem jeweiligen Hintergrund. 

Für die Barrierefreiheit im Web ist dies von Bedeutung, weil der richtige Farbkontrast entscheiden kann, ob Benutzer mit Sehbehinderungen in der Lage sind, Ihre Inhalte zu lesen oder nicht. Eine gelbe Schrift auf weißem Hintergrund ist beispielsweise für Benutzer mit beeinträchtigtem Kontrastsehen weniger gut zu erkennen als eine weiße Schrift auf schwarzem Hintergrund. Die Wahl der falschen Farbkombinationen kann die Navigation und Interaktion auf Ihrer Website schwierig oder sogar unmöglich machen. 

Das Farbschema Ihrer Website sollte geeignet für Menschen mit Farbblindheit, Sehschwäche, niedriger Kontrastempfindlichkeit und anderen Sehbehinderungen sein, die bestimmte Farbkombinationen möglicherweise nicht einwandfrei wahrnehmen können. 

Abgesehen davon, dass ein ausreichender Farbkontrast aus Gründen der Barrierefreiheit notwendig ist, macht er Inhalte für alle Menschen einfacher erkennbar und lesbar, was zu einer besseren Nutzererfahrung für sämtliche Besucher führt. 

Der Siteimprove Color Contrast Checker ist ein benutzerfreundliches Tool, mit dem Sie prüfen können, ob die Schrift- und Hintergrundfarben auf Ihrer Website für Menschen mit Sehschwäche und eingeschränkter Farbwahrnehmung barrierefrei sind.

Die Richtlinien für barrierefreie Webinhalte (WCAG) nutzen einen Wert für das Farbkontrastverhältnis, um zu bestimmen, ob der Kontrast zwischen Ihren Schrift- und Hintergrundfarben angemessen ist.

Da im Web jeder Farbe eine eindeutige Kennung zugeordnet ist (wie etwa RGB-Werte oder HEX-Codes), können zwei Farbcodes genau analysiert und miteinander verglichen werden, um so das Kontrastverhältnis zu ermitteln. Das Verhältnis ist ein Paar aus zwei Zahlen, wobei 1:1 für den schwächsten Kontrast (zum Beispiel weiße Schrift auf weißem Hintergrund) und 21:1 für den stärksten Kontrast (zum Beispiel schwarze Schrift auf weißem Hintergrund) steht.

Um zu prüfen, ob Ihre Schrift- und Hintergrundfarben den WCAG-Mindestanforderungen für Barrierefreiheit entsprechen, müssen Sie einfach nur die HEX-Werte der Farben Ihrer Wahl in den Siteimprove Color Contrast Checker eingeben. Danach berechnet das Tool automatisch Ihr Farbkontrastverhältnis und zeigt es an. 

Außerdem erfahren Sie durch ein einfaches „Ja“ oder Nein“, ob die eingegebene Farbkombination bei Verwendung mit normalgroßem bis großem Text den WCAG-Konformitätsstufen entspricht.

Die Nutzung eines Farbkontrast-Prüfers ist wichtig, um sicherzustellen, dass alle Besucher Ihrer Website, also auch solche mit Sehbehinderungen, Ihre Inhalte einwandfrei wahrnehmen können. 

Abgesehen davon, dass die Nutzung barrierefreier Farbkontraste auf Ihrer Website die ethisch richtige Entscheidung ist, gibt es auch andere überzeugende Gründe dafür, die WCAG-Standards einzuhalten. Laut Seyfarth Shaw LLP wurden 2019 bei US-Bundesgerichten 2.256 Klagen aufgrund von mangelnder digitaler Barrierefreiheit eingereicht; das entspricht einer Zunahme um 177 % – oder durchschnittlich sieben Fälle pro Tag – gegenüber 2017.

Der Einsatz eines speziellen Farbkontrast-Prüfers zur proaktiven Beurteilung der Barrierefreiheit Ihrer Farbkombinationen ist die einfachste Methode, um Ihr Unternehmen vor rechtlichen Schritten und Rufschäden zu bewahren. Und Farbkontrast-Prüfer bieten einen weiteren Vorteil: Sie sind ein vielseitiges Webdesign-Tool, da Sie mit ihnen mehrere Farbkombinationen für Webseiten, Diashows, Infografiken und andere Designelemente auf Ihrer Website schnell testen können.

Die WCAG legen verschiedene Farbkontrast-Bedingungen fest, die zur Einhaltung der Konformitätsstufen AA und AAA erfüllt werden müssen. 

AA-Konformität setzt voraus, dass Ihr Farbpaar für die meisten (aber nicht alle) Menschen wahrnehmbar ist. AAA-Konformität setzt voraus, dass das Farbpaar für eine größtmögliche Anzahl von Menschen wahrnehmbar ist.

Außerdem unterscheiden die WCAG folgendermaßen zwischen Farbkontrastanforderungen für normalgroßen und großen Text:

AA-Konformität:

  • Normalgroßer Text sollte ein Kontrastverhältnis von mindestens 4,5:1 haben
  • Großer Text (≥ 18 pt bei normaler Formatierung, ≥ 14 pt bei Fettschrift) sollte ein Kontrastverhältnis von mindestens 3:1 haben

AAA-Konformität:

  • Normalgroßer Text sollte ein Kontrastverhältnis von mindestens 7:1 haben
  • Großer Text (≥ 18 pt bei normaler Formatierung, ≥ 14 pt bei Fettschrift) sollte ein Kontrastverhältnis von mindestens 4,5:1 haben

Die WCAG 2.1 geben ein Kontrastverhältnis von mindestens 3:1 für bestimmte grafische Elemente und Komponenten von Benutzeroberflächen vor, zum Beispiel für Rahmen von Eingabefeldern in Formularen. Dekorative Elemente wie Markenlogos und Mediendateien werden in den WCAG-Farbkontrastanforderungen nicht ausdrücklich erwähnt. Es empfiehlt sich aber trotzdem, auch bei ihnen auf einen geeigneten Kontrast zu achten.

Wir beantworten Ihre Fragen gerne.

Die Zusammenarbeit mit einem neuen Technologiepartner ist eine wichtige Entscheidung. Wir sind hier, um alle Fragen zu beantworten, die Sie haben.

Beratungstermin vereinbaren