Lesbarkeit messbar machen
Ob ein Text gut lesbar ist, hängt stark vom Kontrast zwischen Schrift und Hintergrund ab. Hellgraue Schrift auf weißem Grund sieht elegant aus, ist für viele Menschen aber schwer zu lesen, besonders bei Sehschwäche, auf kleinen Bildschirmen oder bei Sonnenlicht. Die Web Content Accessibility Guidelines, kurz WCAG, legen deshalb Mindestwerte für das Kontrastverhältnis fest.
Das Kontrastverhältnis vergleicht die relative Leuchtdichte der helleren mit der der dunkleren Farbe. Es reicht von 1 zu 1 bei zwei gleichen Farben bis 21 zu 1 bei Schwarz auf Weiß. Für normalen Text verlangt die Stufe AA mindestens 4,5 zu 1, für großen Text 3 zu 1. Die strengere Stufe AAA fordert 7 zu 1 beziehungsweise 4,5 zu 1. Bedienelemente und informative Grafiken brauchen mindestens 3 zu 1.
Der Rechner wandelt die Hex-Werte in Leuchtdichten um, berechnet das Verhältnis und zeigt für jede Stufe, ob sie erfüllt ist. Die Reihenfolge der Farben spielt keine Rolle.
Kontrast in der Praxis
Großer Text beginnt nach WCAG bei 18 Punkt, das sind etwa 24 Pixel, oder bei 14 Punkt fett, etwa 18,7 Pixel. Überschriften dürfen daher etwas weniger Kontrast haben als Fließtext. Platzhaltertexte in Formularen, Fußnoten und deaktiviert wirkende, aber klickbare Schaltflächen sind häufige Problemstellen.
Für viele Websites und digitale Angebote in der EU gelten Barrierefreiheitsanforderungen, die sich auf die WCAG-Stufe AA stützen. In Deutschland verpflichtet das Barrierefreiheitsstärkungsgesetz seit Mitte 2025 viele Unternehmen, etwa im Onlinehandel. Ein ausreichender Kontrast ist eine der einfachsten Maßnahmen, die sich sofort umsetzen lässt.
Die Formel berücksichtigt weder Schriftstärke noch Transparenz oder Hintergrundbilder. Liegt Text auf einem Foto, prüfen Sie die hellste und die dunkelste Stelle hinter der Schrift. Für künftige Versionen der Richtlinien wird an verbesserten Kontrastmodellen gearbeitet, die Schriftgröße und Polarität stärker einbeziehen; maßgeblich ist derzeit WCAG 2.
Kontrast allein reicht nicht für Barrierefreiheit. Informationen sollten nicht nur über Farbe vermittelt werden, etwa bei Fehlermeldungen in Rot. Farben zwischen Hex, RGB und HSL rechnet der Farbcode-Umrechner um, Schriftgrößen in rem der px-rem-Umrechner. Die Berechnung läuft nur im Browser.
Tipps und typische Fehler
Kontrast sicherstellen.
- Fließtext: 4,5 : 1.
- Platzhalter: Oft zu hell.
- Fotos: Hellste Stelle prüfen.
- Farbe: Nicht allein.
Weitere Rechner: Alltag
Häufige Fragen
Welcher Kontrast ist für Text nötig?
Nach WCAG AA mindestens 4,5 zu 1, für großen Text 3 zu 1.
Was ist der höchste mögliche Kontrast?
21 zu 1 bei Schwarz auf Weiß.
Spielt die Reihenfolge der Farben eine Rolle?
Nein, das Verhältnis ist für beide Richtungen gleich.
Gilt der Kontrast auch für Icons?
Ja, informative Grafiken und Bedienelemente brauchen mindestens 3 zu 1.
Welche Grautöne erfüllen AA auf Weiß?
Etwa #767676 und dunkler.
- Kontrastverhältnis berechnen
- WCAG Kontrast prüfen
- Farbkontrast Rechner
- Kontrast Barrierefreiheit
- Kontrast 4,5 zu 1
- Contrast Ratio
Alle Berechnungen erfolgen direkt in Ihrem Browser, Ihre Eingaben werden nicht übertragen oder gespeichert. Die Ergebnisse sind Orientierungswerte ohne Gewähr und ersetzen keine steuerliche, rechtliche oder finanzielle Beratung. Die Erklärtexte auf dieser Seite wurden mit KI erstellt. Letzte inhaltliche Änderung dieser Seite: . Mehr dazu: So entstehen und prüfen wir die Rechner.