Der Kontrastrechner ist ein interaktives, kostenloses und werbefreies Online-Tool, das anschaulich Farbkontraste für digitale Barrierefreiheit prüft. Diese basieren auf den Kontrastkriterien der Web Content Accessibility Guidelines (WCAG) in den Konformitätsstufen AA und AAA.
Digitale Barrierefreiheit erfordert insbesondere ausreichende Kontraste und Schriftgrößen für optimale Wahrnehmbarkeit. Der Kontrastrechner übernimmt die Berechnung des Kontrastverhältnisses und visualisiert dieses mit Farbe und Schrift. Damit lassen sich schnell ausreichende Farbkombinationen für die Gestaltung ermitteln.
Farbkontraste für digitale Barrierefreiheit prüfen
- Der Kontrastrechner benötigt zwei Farbangaben. Einmal die Vordergrund- und einmal die Hintergrundfarbe. Diese Farben können in den Formaten
HEX,RGBundHSLhinterlegt werden. - Der Kontrastrechner zeigt daraufhin das konkrete Kontrastverhältnis sowie die erfüllten Konformitätsstufen AA und AAA für normalgroßen und großen Text.
- Darunter visualisiert der Kontrastrechner die optische Darstellung mit den gewählten Farbkombinationen und definierten Textgrößen.
Barrierefreiheit
Für die Bewertung ausreichender Kontraste in Farbe und Größe sind vor allem rechtliche Vorgaben wie das Barrierefreiheitsstärkungsgesetz (BFSG) (externer Link), die Barrierefreie-Informationstechnik-Verordnung (BITV) (externer Link), die Web Content Accessibility Guidelines (WCAG) (externer Link) und das Behindertengleichstellungsgesetzes (BGG) (externer Link) mit Richtlinie 2019/882 des Europäischen Parlaments und des Rates vom 17. April 2019 (externer Link) relevant.
Letztlich laufen diese Regelungen bei den Kontrasten auf die Web Content Accessibility Guidelines (WCAG) in den Konformitätsstufen A und AA hinaus. Darauf basiert dieser Kontrastrechner. Er beinhaltet zudem eine Überprüfung, ob die höheren Anforderungen der Stufe AAA erfüllt werden. Mehr zur Haftung.
Zugänglichkeit
Neben rechtlichen Vorgaben dienen ausreichende Kontraste auch generell der Inklusion sowie Zugang für alle bzw. möglichst vielen Menschen. Daher lohnt es sich, bei jedem Design und Webdesign auf gut wahrnehmbare Farbkombinationen Rücksicht zu nehmen.
Eine für alle zugängliche Webseite erhöht nicht nur den Traffic, sondern erweitert auch Ihre Zielgruppe und verbessert das Benutzererlebnis. Doch viele der geforderten Regelungen, insbesondere die WCAG Farbkontrast-Standards, erscheinen auf den ersten Blick komplex. Oft ist nicht einmal bekannt, welche Anpassungen nötig sind, um konform zu sein.
Mindestkontrast WCAG
In den Web Content Accessibility Guidelines (WCAG) 2.1 und 2.2 sind spezifische Anforderungen für Farbkontraste sowie Größenverhälnisse festgelegt, um sicherzustellen, dass Inhalte für Menschen mit Sehbehinderungen oder Farbsehschwächen besser lesbar und wahrnehmbar sind. Diese Anforderungen sind unter dem Prinzip »Wahrnehmbarkeit« zu finden und zielen darauf ab, dass Texte und visuelle Elemente für alle Nutzer klar unterscheidbar sind.
- Textkontrast (Minimum) – Erfolgskriterium 1.4.3
Das Verhältnis von Schrift und Textbildern zu ihrem Hintergrund sollte mindestens4,5:1betragen, um die Lesbarkeit für Menschen mit Sehschwäche zu gewährleisten. Dies gilt für normalen Text.
Für großen Text (ab 18 Punkt oder 14 Punkt fett) wird ein Verhältnis von mindestens3:1als ausreichend betrachtet. - Kontrast von grafischen Objekten und Benutzeroberflächenelementen – Erfolgskriterium 1.4.11
Die visuellen Informationen, die zum Verständnis von Inhalten oder zur Bedienung von Benutzeroberflächenelementen notwendig sind, müssen ebenfalls ein Mindestkontrastverhältnis von 3:1 gegenüber den angrenzenden Farben aufweisen. Dies betrifft auch interaktive Elemente wie Buttons und Formularfelder. - Textbilder – Erfolgskriterium 1.4.5
Text, der in Bilder eingebettet ist, sollte vermieden werden, da diese oft nicht die nötigen Kontrastverhältnisse erreichen und zudem die Skalierbarkeit und Anpassbarkeit für verschiedene Ausgabegeräte verlieren können. Wo Textbilder unvermeidlich sind, muss ebenfalls ein Farb-Kontrastverhältnis von mindestens4,5:1eingehalten werden.
Kontrastanforderungen BFSG
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt bestimmte Anforderungen für die digitale Barrierefreiheit fest, die sich stark an die Web Content Accessibility Guidelines (WCAG) 2.1 anlehnen. Konkret für den Bereich der Farbkontraste legt das BFSG fest, dass Webseiten klare und ausreichende Farb-Kontrastverhältnisse bieten müssen, um die Wahrnehmbarkeit für Nutzer mit Sehbehinderungen zu garantieren. Hierbei wird ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (ab 18 Punkt oder 14 Punkt fett) gefordert.
Kontrast-Berechnung
Kontrast
Kontrast ist ein grundlegendes Merkmal der visuellen Wahrnehmung und bezeichnet den Unterschied in der Helligkeit oder Farbe, der dazu dient, Objekte im Sehfeld voneinander abzugrenzen. Dieser Unterschied wird durch die minimalen und maximalen Leuchtdichten definiert, die entweder von einer Oberfläche emittiert oder reflektiert werden. Die Leuchtdichte gibt dabei die Menge des Lichts an, das von einer Oberfläche ausgestrahlt oder zurückgeworfen wird.
Ein schwarzes Objekt absorbiert die meiste Strahlung, die auf es trifft, und reflektiert sehr wenig Licht zurück. Daher wäre die Leuchtdichte eines ideal schwarzen Objekts in der Theorie 0, weil es kein Licht aussendet oder reflektiert. In der Praxis gibt es jedoch kein perfekt schwarzes Objekt, da fast alle Materialien ein wenig Licht reflektieren, aber sehr dunkle Objekte kommen diesem Ideal sehr nahe. Ein weißes Blatt Papier hingegen verhält sich fast genau entgegengesetzt. Es reflektiert fast das gesamte auf es einfallende Licht und hat deshalb eine hohe Leuchtdichte.
Obwohl das menschliche Auge in der Lage ist, rund eine Million Farbkombinationen in den Dimensionen Farbton, Sättigung und Helligkeit zu unterscheiden, ist es besonders effektiv darin, Unterschiede in der Helligkeit, also den Kontrast, wahrzunehmen. Dies liegt an einem Prozess namens laterale Inhibition, der auf der Retina stattfindet und Helligkeitsunterschiede bzw. Farbkontraste verstärkt, sodass diese vom Auge besser wahrgenommen werden können.
Kontrastberechnung
In der Praxis unterscheidet man hauptsächlich zwischen zwei Arten von Kontrastberechnungen:
- Weber-Kontrast: Der Weber-Kontrast misst den Kontrast zwischen einem Objekt und seinem unmittelbaren Hintergrund. Er wird definiert als das Verhältnis der Differenz der Leuchtdichte des Objekts zur Leuchtdichte des Hintergrunds, bezogen auf die Leuchtdichte des Hintergrunds. Diese Messung ist besonders nützlich, um die Sichtbarkeit und Abhebung eines Objekts von seinem Hintergrund in verschiedenen Kontexten, von Verkehrsschildern bis hin zur digitalen Bildbearbeitung, zu bewerten.
- Michelson-Kontrast: Diese Kontrastmessung eignet sich besonders für die Bewertung von Texten bzw. Schrift oder grafischen Mustern, bei denen deutliche Wechsel zwischen hellen und dunklen Bereichen vorhanden sind. Der Michelson-Kontrast wird berechnet, indem man die Differenz zwischen der maximalen und der minimalen Leuchtdichte nimmt und diese durch die Summe der maximalen und minimalen Leuchtdichte teilt. Dieser Kontrastwert ist entscheidend für die Beurteilung der Lesbarkeit von Texten und der Qualität von Bildschirmdarstellungen.
Beide Kontrasttypen sind essenziell für die Gestaltung visueller Medien und spielen eine entscheidende Rolle bei der Schaffung zugänglicher und barrierefreier Inhalte, insbesondere im Hinblick auf Personen mit Sehbeeinträchtigungen.
Die Berechnung der Leuchtdichten und der entsprechenden Kontrastverhältnisse von Farbkombinationen kann zeitaufwendig sein. Um diesen Prozess zu vereinfachen und zu beschleunigen, steht Ihnen unser kostenloses Kontrastrechner-Tool zur Verfügung. Dieses Tool ermöglicht es, innerhalb von Sekunden präzise Kontrastmessungen durchzuführen.
Polaritäts-Effekt
Der Polaritätseffekt bezieht sich darauf, wie der Hintergrund eines Textes dessen Lesbarkeit beeinflusst. Dabei unterscheidet man hauptsächlich zwischen zwei Arten: Positive Polarität, wenn der Text dunkel auf hellem Hintergrund (light mode) steht, und negative Polarität, wenn helle Schrift auf dunklem Grund (dark mode) verwendet wird. Diese Unterschiede im Kontrast können die Lesbarkeit stark beeinflussen, was besonders wichtig für die Gestaltung von Webseiten und Apps ist.
Der Polaritätseffekt tritt auf, weil das menschliche Auge unterschiedlich auf Kontraste reagiert, die durch verschiedene Kombinationen von Textfarben und Hintergründen entstehen. Bei positiver Polarität, also bei dunkler Schrift auf hellem Grund, wird in der Regel eine bessere Lesbarkeit erreicht. Dies liegt daran, dass das Umgebungslicht die Texte klarer und schärfer erscheinen lässt, was die Augen weniger belastet. Negative Polarität, also helle Schrift auf dunklem Hintergrund, kann in Umgebungen mit wenig Licht angenehmer für die Augen sein, da weniger Licht vom Bildschirm ausgeht und somit die Blendung reduziert wird.
Häufige Fragen zum Kontrast
Kontrast (italienisch contrasto ‚Gegensatz‘ und lateinisch contra ‚gegen‘ und stare ‚stehen‘ entlehnt) bedeutet generell Gegensatz oder deutlicher Unterschied.
Auf dieser Webseite geht es nicht um sprachliche/ semantische, sondern um optische/ farbliche Unterschiede – also um die Differenz zwischen hellen und dunklen Farben.
Ein gutes Kontrastverhältnis hängt vom Verwendungszweck ab. Auf digitalen Monitoren empfehlen die Web Content Accessibility Guidelines (WCAG) für Texte auf Webseiten ein Minimum von 4.5:1 für normalgroßen Text (14 Punkt) und mindestens 3:1 für großen Text (18 Punkt). Dieses Verhältnis stellt sicher, dass Texte auch für Personen mit Sehbehinderungen und visuellen Einschränkungen ausreichend gut wahrnehmbar und lesbar sind.
Das ideale Kontrastverhältnis ist hoch genug, um Lesbarkeit und Sichtbarkeit zu gewährleisten, ohne dabei unangenehm für das Auge zu sein. Denn sehr starke Kontraste wie Schwarz auf Weiß (21:1) können vor allem digital unangenehm sein. Diese Webseite hat im hellen Modus meist ein Kontrastverhältnis von 16:1 und liegt damit nahe dem optisch angenehmem oberen Grenzbereich.
Minimal ausreichend wird insbesondere bei Texten auf digitalem Hintergrund ein Kontrast-Verhältnis von mindestens 4.5:1 angesehen.
Der stärkste Kontrast wird durch reines Weiß auf reinem Schwarz oder umgekehrt erreicht, was ein Kontrastverhältnis von theoretisch unendlich ergibt. Rein berechnet für digitale Monitore liegt man bei 21:1.
Dies maximiert theoretisch die Sichtbarkeit, wird praktisch jedoch als zu intensiv und unangenehm empfunden. Letztlich hängt das auch vom genutzten Monitor und dessen Einstellungen im Einzelfall ab.
Ein barrierefreier Kontrast orientiert sich an den gesetzlichen Regelungen. Diese unterscheiden sich etwa nach BFSG oder BITV, stellen letztlich für den Kontrast auf die Anforderungen der WCAG ab. Das bedeutet mindestens ein Verhältnis von 4.5:1 für normalen Text (14 Punkt) und 3:1 für großen Text (18 Punkt) oder Grafikelemente, um Benutzern mit Sehbeeinträchtigungen die Nutzung zu erleichtern.
Kriterien neben Farbkontrasten
Vor allem bei Typografie gibt es mehr Kriterien für Wahrnehmbarkeit als den reinen Farbkontrast. Man sollte daher auch weitere Faktoren berücksichtigen wie:
- Schriftart: Zeichen müssen erkennbar und unterscheidbar sein, auch Strichstärkenkontraste spielen dabei eine Rolle.
- Zeichenabstand, Laufweite: gerade bei Versalien (Großbuchstaben) mehr Zeichenabstand geben, auch bei hellem Text auf dunklem Hintergrund.
- Hervorhebungen: kurze Überschriften, Abstätze, fett, kursiv, Markierungen sparsam und gezielt einsetzen.
- Zeilenabstand: je länger die Zeilen, desto mehr Abstand – Lesbarkeit vor Optik.
- Zeilenlänge: je nach Textart werden zwischen 35 und 80 Zeichen (inkl. Leerzeichen) pro Zeile empfohlen.
- Ausrichtung: vor allem Blocksatz ist unregelmäßig, große Wortzwischenräume sind schwieriger zu lesen und im Web eher zu vermeiden.
Themen dieser Seite
#Kontrastrechner #Barrierefreiheit #barrierefrei #BFSG #WCAG #Farbkontrast #prüfen #Tool #berechnen #Vergleich #Monitor #Tabelle
Fragen, Fehler, Hinweise?
Sie haben eine Frage, einen Fehler gefunden oder Verbesserungsvorschläge?
Sehr gut, wir freuen uns auf Ihre Nachricht an kontakt@kontrastrechner.de (zu den Kontaktdaten).
Haftungshinweise
Trotz umfangreicher Prüfung können wir im Einzelfall keine rechtliche Gewähr übernehmen, dass die angezeigten Grenzwerte den rechtlichen Vorgaben entsprechen.
Änderungen
- 04.02.2025
Optische Verbesserungen der Nutzerfreundlichkeit. - 29.01.2025
Initiale Version des Kontrastrechner-Tools.
Quellen, weiterführende Links
- https://www.w3.org/TR/WCAG22/ (externer Link), zuletzt abgerufen am 03.02.2025.
- https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html (externer Link), zuletzt abgerufen am 04.02.205.
- https://leserlich.info/kontrastrechner (externer Link), zuletzt abgerufen am 04.02.2025.
- https://www.siteimprove.com/de/toolkit/color-contrast-checker/ (externer Link), zuletzt abgerufen am 04.02.2025.
- https://barrierefreies.design/barrierefreiheit-interaktiv-testen/farben-und-kontraste-pruefen (externer Link), zuletzt abgerufen am 03.02.2025.
- https://de.wikipedia.org/wiki/Sieben_Farbkontraste (externer Link), zuletzt abgerufen am 03.02.2025.
- Erweiterung für Google Chrome – Farbkontraste als Add-on (externer Link), zuletzt abgerufen a, 14.06.2025.