Für digitale Barrierefreiheit sind ausreichende Farbkontraste essenziell. Diese sind mitunter nicht immer einfach zu berechnen, gerade bei mehreren Vordergrund- und Hintergrundfarben.
Daher haben wir einen einfachen Farbkontraste-Rechner gebaut, welcher die Kontraste nach den ausschlaggebenden Kriterien der WCAG Richtlinien nach Stufe AA (und AAA) prüft. 👇🏼
| AA | AAA | |
|---|---|---|
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text (18pt oder 14pt fett) | 3:1 | 4,5:1 |
Anleitung
Version 1.1, Stand: 04.03.2025, erfordert JavaScript, keine Eingaben werden gespeichert.
Farbgestaltung ist mehr als eine Geschmacksfrage – sie kann darüber entscheiden, ob eine Webseite zugänglich oder unlesbar ist. Gerade für Menschen mit eingeschränktem Sehvermögen oder Farbsehschwächen sind klare Kontraste essenziell. Deshalb ist das Thema nicht nur eine Empfehlung für gutes Design, sondern mittlerweile auch gesetzlich geregelt: Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet bestimmte digitale Angebote zur Barrierefreiheit – und dazu gehören auch angemessene Farbkontraste.
Farben helfen uns, Inhalte schnell zu erfassen. Doch was für manche ein deutlicher Unterschied ist, kann für andere kaum erkennbar sein. Besonders Menschen mit Rot-Grün-Sehschwäche, Grauem Star oder anderen Seheinschränkungen sind auf hohe Kontraste angewiesen. Selbst Menschen ohne Sehprobleme profitieren von klaren Farbabstufungen – z. B. bei grellem Sonnenlicht auf dem Handybildschirm.
Deshalb fordern die Web Content Accessibility Guidelines (WCAG) in der Abstufung AA, auf die sich das BFSG bezieht, ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für große Schrift. Das heißt: Ein hellgrauer Text auf weißem Hintergrund oder pastellfarbene Buttons auf einem kaum dunkleren Untergrund sind nicht barrierefrei.
Gute Kontraste sorgen nicht nur für eine bessere Lesbarkeit, sondern sind auch ein entscheidender Faktor für Barrierefreiheit. Doch wie misst man eigentlich den Kontrast?
In der Praxis unterscheidet man hauptsächlich zwischen zwei Methoden:
Der Weber-Kontrast bewertet, wie stark sich ein Objekt von seinem unmittelbaren Hintergrund abhebt. Er wird berechnet, indem die Differenz der Leuchtdichte des Objekts zur Leuchtdichte des Hintergrunds ins Verhältnis gesetzt wird. Diese Methode wird vor allem für Verkehrsschilder, Bildbearbeitung oder Objekterkennung verwendet – überall dort, wo es darum geht, dass ein Element klar erkennbar sein muss.
Der Michelson-Kontrast ist besonders wichtig für die Lesbarkeit von Texten und die Darstellung auf Bildschirmen. Er wird anhand der Differenz zwischen der maximalen und minimalen Leuchtdichte berechnet und zeigt, wie deutlich sich helle und dunkle Bereiche voneinander unterscheiden. Diese Messung hilft dabei, Webseiten, Apps und digitale Displays so zu gestalten, dass Inhalte für alle Nutzer gut erkennbar sind – auch für Menschen mit Sehbeeinträchtigungen.
Die manuelle Berechnung von Kontrastverhältnissen kann kompliziert und zeitaufwendig sein. Unser kostenloses Kontrastrechner-Tool hilft Ihnen, innerhalb weniger Sekunden präzise Messungen durchzuführen und sicherzustellen, dass Ihre Inhalte den Anforderungen an Barrierefreiheit und das BFSG entsprechen.
Kontrast beschreibt den Unterschied zwischen hellen und dunklen Bereichen oder verschiedenen Farben in einem Bild, Text oder Design. Ein hoher Kontrast sorgt für gute Erkennbarkeit und Lesbarkeit, während ein niedriger Kontrast Inhalte schwer unterscheidbar macht. Besonders für barrierefreie Gestaltung ist ein ausreichender Farbkontrast essenziell, um Inhalte für Menschen mit Sehbeeinträchtigungen zugänglich zu machen.
Das optimale Kontrastverhältnis richtet sich nach dem jeweiligen Einsatzbereich. Für digitale Inhalte geben die Web Content Accessibility Guidelines (WCAG) klare Mindestwerte vor: 4,5:1 für normalen Text (ca. 14 Punkt) und mindestens 3:1 für größere Schrift (ab 18 Punkt). Diese Vorgaben stellen sicher, dass Texte auch für Menschen mit Sehbehinderungen oder eingeschränktem Sehvermögen gut erkennbar und lesbar bleiben.
Das optimale Kontrastverhältnis sorgt für gute Lesbarkeit und klare Sichtbarkeit, ohne dabei die Augen zu überanstrengen. Extrem hohe Kontraste, wie Schwarz auf Weiß (21:1), können auf Bildschirmen unangenehm wirken. Ein Wert von 16:1, wie er in vielen hellen Designmodi verwendet wird, liegt im oberen, noch angenehmen Bereich.
Für digitale Texte gilt ein Mindestkontrast von 4,5:1, um eine ausreichende Lesbarkeit sicherzustellen – besonders für Menschen mit Sehbeeinträchtigungen.
Ein barrierefreier Kontrast richtet sich nach den gesetzlichen Vorgaben, die sich auf die Web Content Accessibility Guidelines (WCAG) stützen. Laut BFSG und BITV gelten folgende Mindestwerte:
Trotz umfangreicher Prüfung können wir im Einzelfall keine rechtliche Gewähr übernehmen, dass die angezeigten Grenzwerte den rechtlichen Vorgaben entsprechen.
Themen dieser Seite:Kontrast Farbkontraste barrierefrei WCAG Online-Tool Quick-Check AA kostenlos deutsch
Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden und Sie die Datenschutzerklärung akzeptieren.
