Kontrastverhältnis Text Hintergrund prüfen: 7 Profi-Tipps
Wer das Kontrastverhältnis Text Hintergrund prüfen möchte, steht oft vor einem unsichtbaren Problem: Ein Design sieht auf dem eigenen Monitor perfekt aus, doch für viele Menschen ist der Text kaum lesbar. Schwacher Kontrast schließt Nutzer mit Sehschwäche aus und kostet dich Reichweite. In diesem Artikel zeige ich dir aus über zehn Jahren Praxis im Webdesign, wie du Kontraste zuverlässig misst, welche Grenzwerte gelten und mit welchen Tools du in Sekunden Klarheit bekommst. Am Ende weißt du genau, wie du Farben so kombinierst, dass sie sowohl schön als auch barrierefrei sind.
Warum du das Kontrastverhältnis von Text und Hintergrund prüfen solltest
Rund 8 % aller Männer und etwa 0,5 % der Frauen haben eine Form der Farbsehschwäche. Hinzu kommen Millionen Menschen mit altersbedingt nachlassender Sehkraft. Ein guter Kontrast ist deshalb kein Luxus, sondern eine Grundvoraussetzung für Zugänglichkeit.
Auch rechtlich wird das Thema greifbar: Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt ab dem 28. Juni 2025 für viele B2C-Angebote wie Onlineshops, Banking und Buchungssysteme. Als technische Referenz zieht die Aufsicht die WCAG-Kriterien heran – genau die, die du gleich kennenlernst. Wer jetzt prüft, spart sich teures Nachbessern.
Und nicht zuletzt profitiert deine Conversion-Rate: Gut lesbare Texte halten Besucher länger auf der Seite und senken die Absprungrate spürbar.
Was bedeutet Kontrastverhältnis eigentlich?
Das Kontrastverhältnis beschreibt das Verhältnis der relativen Leuchtdichte zwischen zwei Farben. Es reicht von 1:1 (kein Unterschied) bis 21:1 (reines Schwarz auf reinem Weiß). Je höher der Wert, desto besser die Lesbarkeit.
Berechnet wird es nach der Formel (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Leuchtdichte ist. Die technischen Details erklärt die offizielle WCAG-Dokumentation des W3C sehr detailliert. Für die Praxis musst du die Formel aber nicht selbst rechnen – dafür gibt es Tools.
Die wichtigsten WCAG-Grenzwerte
Die Web Content Accessibility Guidelines definieren klare Mindestwerte:
- 4,5:1 – Mindestkontrast für normalen Text (Level AA)
- 3:1 – ausreichend für großen Text (ab 24 px bzw. 18,66 px fett)
- 7:1 – erhöhter Kontrast für normalen Text (Level AAA)
- 3:1 – für grafische Objekte und Bedienelemente (seit WCAG 2.1)
Meine Empfehlung: Ziel mindestens auf 4,5:1 ab, strebe aber 7:1 an, wo es das Design zulässt.
Kontrastverhältnis Text Hintergrund prüfen: 7 Profi-Tipps
Jetzt wird es praktisch. Diese sieben Schritte nutze ich in jedem Projekt.
1. Nutze einen Online-Kontrast-Checker
Der schnellste Weg ist ein Web-Tool. Der kostenlose WebAIM Contrast Checker zeigt dir sofort das Verhältnis und ob AA und AAA bestanden werden. Du gibst zwei Hex-Codes ein – ein Test dauert unter 30 Sekunden.
2. Prüfe beide Textgrößen getrennt
Ein Kontrast von 3,5:1 reicht für eine 24-px-Überschrift, versagt aber im 16-px-Fließtext. Prüfe deshalb Überschriften, Body-Text und Buttons jeweils einzeln gegen den passenden Grenzwert.
3. Vergiss Hover- und aktive Zustände nicht
Links ändern beim Überfahren oft ihre Farbe. Prüfe auch :hover-, :focus- und :visited-Zustände, sonst wird ein Element im Hover plötzlich unlesbar.
4. Teste transparente Hintergründe realistisch
Liegt Text auf einem Bild mit halbtransparentem Overlay, prüfst du nicht den Farbwert des Overlays, sondern die tatsächlich sichtbare Mischfarbe. Ein bewährter Wert: ein schwarzes Overlay mit 40–60 % Deckkraft bringt weißen Text meist sicher über 4,5:1.
5. Simuliere Farbsehschwächen
Die Chrome-DevTools bieten unter „Rendering“ Filter für Protanopie, Deuteranopie und Tritanopie. So siehst du direkt, ob dein Design auch für farbfehlsichtige Nutzer funktioniert.
6. Baue Kontrast in dein Farbschema ein
Am besten planst du Kontraste schon bei der Farbauswahl. Wie du ein stimmiges und barrierefreies Farbsystem aufbaust, erkläre ich im Beitrag Farbschema für Website erstellen. So vermeidest du späteres Nachbessern.
7. Dokumentiere deine geprüften Werte
Halte in einem Styleguide fest, welche Kombinationen freigegeben sind – am besten mit Hex-Code, gemessenem Verhältnis und Level (AA/AAA). Das spart im Team viel Zeit und sorgt für Konsistenz.
Diese Tools helfen dir beim Kontrast prüfen
Vier Werkzeuge decken fast alle Fälle ab. Die folgende Tabelle zeigt, wann welches passt:
| Tool | Typ / Preis | Stärke | Ideal für |
|---|---|---|---|
| WebAIM Checker | Web, kostenlos | Hex eingeben, sofort AA/AAA | schnelle Einzelprüfung |
| Colour Contrast Analyser (CCA) | Desktop (Win/Mac), kostenlos | Pipette greift Farben vom Bildschirm | Screenshots, PDFs, Apps |
| Figma-Plugins (z. B. Stark, Contrast) | Plugin, teils kostenlos | Live-Anzeige beim Gestalten | Designer im Entwurf |
| Lighthouse (Chrome) | im Browser, kostenlos | automatischer Scan der ganzen Seite | fertige Websites prüfen |
Meine Empfehlung: Prüfe im Entwurf direkt in Figma, kontrolliere Einzelfälle mit dem WebAIM Checker und lass am Schluss Lighthouse über die Live-Seite laufen. Für gedruckte Vorlagen oder Elemente ohne Hex-Wert brauchst du zwingend den CCA mit Pipette – reine Web-Checker helfen dir hier nicht.
Wenn du Farbwerte aus einem Foto oder Screenshot extrahieren willst, hilft dir mein Beitrag Farbpalette aus Bild erstellen weiter. Die gewonnenen Farben prüfst du anschließend direkt im Contrast Checker gegen.
Häufige Fehler beim Kontraste prüfen
Ein Klassiker: Hellgrauer Text (#999999) auf Weiß. Sieht modern aus, erreicht aber nur 2,8:1 und fällt damit durch. Ähnlich problematisch sind Farbverläufe hinter Text, weil der Kontrast an der hellsten Stelle des Verlaufs zusammenbricht.
Ein zweiter Fehler: sich nur auf den eigenen Monitor verlassen. Displays unterscheiden sich stark in Helligkeit und Farbdarstellung. Verlasse dich deshalb immer auf gemessene Werte statt aufs Bauchgefühl.
Dritter Irrtum: Information nur über Farbe transportieren – etwa rote und grüne Balken ohne Beschriftung. WCAG-Kriterium 1.4.1 verbietet genau das, unabhängig vom Kontrastwert.
Wer die Wirkung von Farben besser verstehen will, dem empfehle ich den Artikel Was bedeutet die Farbe Blau in der Psychologie – Farbwahl ist eben immer auch Wahrnehmung.
FAQ: Kontrastverhältnis Text und Hintergrund prüfen
Wie kann ich das Kontrastverhältnis von Text und Hintergrund prüfen?
Am einfachsten mit einem Online-Tool wie dem WebAIM Contrast Checker. Du gibst die Hex-Codes von Text und Hintergrund ein und erhältst sofort das Verhältnis inklusive WCAG-Bewertung.
Welches Kontrastverhältnis ist barrierefrei?
Für normalen Text gilt mindestens 4,5:1 (Level AA). Großer Text ab 24 px darf bei 3:1 liegen. Für maximale Barrierefreiheit (AAA) werden 7:1 empfohlen.
Warum bestehen meine Farben den Kontrasttest nicht?
Meist liegt es an zu ähnlicher Helligkeit beider Farben. Dunkle Farbe dunkler oder helle Farbe heller einstellen erhöht den Kontrast, ohne den Farbton komplett zu ändern.
Reicht es, den Kontrast nur mit dem Auge zu beurteilen?
Nein. Wahrnehmung ist subjektiv und monitorabhängig. Nur ein gemessener Wert gibt dir Sicherheit, dass dein Text für alle Nutzer lesbar ist.
Gilt das Kontrastverhältnis auch für Buttons und Icons?
Ja. Bedienelemente und grafische Objekte müssen einen Kontrast von mindestens 3:1 zum Hintergrund haben, damit sie erkennbar bleiben.
Fazit: Jetzt Kontraste prüfen und Lesbarkeit sichern
Das Kontrastverhältnis Text Hintergrund prüfen ist einer der wirkungsvollsten und zugleich einfachsten Schritte zu einer besseren Website. Mit den richtigen Grenzwerten – 4,5:1 für Text, idealerweise 7:1 – und dem passenden Tool erledigst du das in wenigen Minuten. Du machst dein Design nicht nur barrierefrei, sondern auch professioneller und conversionstärker.
Mein Rat: Öffne jetzt einen Contrast Checker, gib deine wichtigsten Farbkombinationen ein und dokumentiere die Ergebnisse mit Hex-Code und Level. Stöbere danach gern durch meine weiteren Farbtipps auf piracolor und bring dein Farbkonzept auf das nächste Level!