Eine Kontrastprüfung zeigt, wie deutlich sich zwei Farben voneinander unterscheiden – zum Beispiel eine Textfarbe und die dazugehörige Hintergrundfarbe. Ein ausreichender Kontrast ist wichtig, damit Inhalte gut lesbar und auch für Menschen mit eingeschränktem Sehvermögen zugänglich sind.

Unser Kontrastprüfer berechnet das Kontrastverhältnis und zeigt direkt an, ob die gewählten Farben die entsprechenden WCAG-Anforderungen erfüllen.

Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen zwei Farben. Es wird beispielsweise als 4,5:1 oder 7:1 angegeben.

Das Verhältnis reicht von 1:1 bei sehr geringem Kontrast bis 21:1 beim maximalen Kontrast zwischen Schwarz und Weiß. Je höher der Wert ist, desto stärker unterscheiden sich die Farben voneinander.

Für normalen Text ist nach WCAG ein Kontrastverhältnis von mindestens 4,5:1 erforderlich, um die Konformitätsstufe AA zu erreichen.

Für die strengere Stufe AAA sind mindestens 7:1 erforderlich.

Für große Schrift reicht nach WCAG ein Kontrastverhältnis von mindestens 3:1 für die Stufe AA aus.

Für AAA sind mindestens 4,5:1 erforderlich.

Als große Schrift gilt grundsätzlich eine Schriftgröße von mindestens 18 Punkt beziehungsweise etwa 24 CSS-Pixel. Bei fetter Schrift liegt die Grenze bei mindestens 14 Punkt beziehungsweise etwa 18,5 CSS-Pixel.

AA und AAA sind Konformitätsstufen der Web Content Accessibility Guidelines (WCAG).

AA stellt die in der Praxis übliche Zielstufe für die Barrierefreiheit einer Website dar. AAA beinhaltet strengere Anforderungen.

Für die meisten Websites ist es sinnvoll, mindestens die Anforderungen der Stufe AA zu erfüllen.

Die Anforderungen unterscheiden sich je nach Verwendung. Für normalen Text ist ein höherer Kontrast notwendig, weil kleine Schrift bei geringem Kontrast schwerer zu erkennen ist.

Ein Verhältnis von 3:1 reicht deshalb nicht für normalen Text aus. Es kann jedoch für große Schrift sowie bestimmte Benutzeroberflächen und grafische Elemente ausreichend sein.

Für bestimmte wichtige grafische Elemente und Benutzeroberflächen gilt grundsätzlich ein Mindestkontrast von 3:1.

Dazu können beispielsweise Bedienelemente, sichtbare Zustände von Eingabefeldern oder wichtige Icons gehören.

Nicht jedes grafische Element muss jedoch automatisch einen Kontrast von 3:1 erfüllen. Entscheidend ist unter anderem, ob das Element für das Verständnis oder die Bedienung der Inhalte relevant ist.

Nicht unbedingt. Ein hoher Kontrast verbessert zwar in vielen Fällen die Lesbarkeit, aber die Gestaltung sollte trotzdem ausgewogen sein.

Sehr starke Kontraste können je nach Gestaltung als unangenehm empfunden werden. Für normale Texte ist es deshalb sinnvoll, die WCAG-Anforderungen zu erfüllen und gleichzeitig auf eine insgesamt angenehme Typografie und Gestaltung zu achten.

Schwarz und Weiß bieten mit 21:1 den maximal möglichen Kontrast, sind aber für eine moderne Gestaltung nicht zwingend erforderlich.

Viele Farbkombinationen können die WCAG-Anforderungen erfüllen. Der Kontrastprüfer hilft dabei, passende Farbkombinationen zu finden, ohne auf eine rein schwarze und weiße Gestaltung angewiesen zu sein.

Wenn eine Farbkombination die Anforderungen nicht erfüllt, solltest du entweder die Textfarbe oder die Hintergrundfarbe anpassen.

Oft reicht bereits eine kleine Veränderung der Helligkeit oder Farbsättigung aus, um einen ausreichenden Kontrast zu erreichen. Besonders bei normalen Texten sollte ein Kontrast von mindestens 4,5:1 angestrebt werden.

Die Kontrastprüfung bewertet immer die jeweils geprüfte Farbkombination. Eine Website kann deshalb gleichzeitig gute und schlechte Kontrastverhältnisse haben.

Es empfiehlt sich, alle wichtigen Kombinationen zu prüfen, beispielsweise:

• Fließtext auf hellem Hintergrund
• Text auf farbigen Flächen
• Überschriften
• Links
• Buttons
• Formulare und Eingabefelder
• Icons und wichtige grafische Elemente
• Texte in Hover- und Fokus-Zuständen

Nein. Eine Kontrastprüfung ist nur ein Teil der Prüfung auf digitale Barrierefreiheit.

Eine barrierefreie Website muss neben ausreichenden Kontrasten unter anderem auch eine sinnvolle Tastaturbedienung, verständliche Inhalte, ausreichende Fokusdarstellung, geeignete Alternativtexte und eine korrekte semantische Struktur berücksichtigen.

Der Kontrastprüfer ist daher ein praktisches Werkzeug, um Farbkontraste gezielt zu überprüfen, ersetzt aber keine vollständige Barrierefreiheitsprüfung.

Die Bewertung orientiert sich an den Web Content Accessibility Guidelines (WCAG). Für die Kontrastverhältnisse werden dabei insbesondere die Anforderungen für normalen Text, großen Text sowie relevante Benutzeroberflächen und grafische Elemente berücksichtigt.

Ja. Du kannst die Vordergrund- und Hintergrundfarbe direkt über die Farbauswahl oder über ihren HEX-Wert eingeben.

So lassen sich beispielsweise die Farben deines Corporate Designs, deiner Website oder einzelner Komponenten prüfen und miteinander vergleichen.

Ob eine Farbkombination ausreichend ist, hängt davon ab, wo sie eingesetzt wird.

Ein Kontrast von beispielsweise 3,2:1 kann für große Schrift ausreichend sein, aber für normalen Text nicht. Deshalb bewertet der Kontrastprüfer dieselbe Farbkombination anhand verschiedener WCAG-Anforderungen.