Prüfe Text- und Hintergrundfarben mit dem Kontrast Checker, inklusive Vorschau und klaren Tipps.
Gestalte barrierefreie Oberflächen, die alle gut nutzen können.
Kontrast Checker vergleicht eine Textfarbe mit einer Hintergrundfarbe und zeigt, ob beide Farben zusammen gut lesbar sind. Die Oberfläche arbeitet mit HEX-Werten, einem Farbwähler, Reglern für Helligkeit und Deckkraft sowie einer Live-Vorschau. So erkennst du sofort, ob ein Text, eine Schaltfläche oder ein Interface-Element genügend Abstand zum Hintergrund hat.
Ein Contrast Checker ist besonders nützlich, wenn ein Entwurf zwar optisch ruhig wirkt, der Text aber auf echten Bildschirmen schwer zu lesen ist. Der angezeigte Wert beschreibt das Kontrastverhältnis. Ein höherer Wert bedeutet in der Regel eine stärkere Trennung zwischen Vordergrund und Hintergrund. Die Vorschau zeigt gleichzeitig, wie Überschrift, Fließtext und Schaltfläche mit den gewählten Farben wirken.
Kontrast Checker bewertet die Farbkombination anhand sichtbarer Lesbarkeitsergebnisse für normalen Text, großen Text und strengere Lesesituationen. Dadurch ist nicht nur die Zahl sichtbar, sondern auch die praktische Bedeutung: Welche Paarung reicht für normale UI-Beschriftungen, welche nur für große Überschriften und welche sollte für wichtigen Text angepasst werden?
Die Auswertung trennt zwischen normalem Text, großem Text und strengeren Qualitätsstufen. Für normalen Fließtext ist ein höherer Kontrast nötig, weil kleine Zeichen, dünne Schriftstärken und niedrige Bildschirmhelligkeit die Lesbarkeit verschlechtern können. Große Überschriften oder kräftige Beschriftungen dürfen mit einem geringeren Verhältnis arbeiten, solange sie deutlich erkennbar bleiben.
Die Werte sind Schwellen. Ein Ergebnis knapp unter einem Grenzwert sollte nicht aufgerundet werden, weil ein rechnerisch zu niedriger Wert die Anforderung nicht erfüllt. Deshalb ist eine sichtbare Sicherheitsreserve sinnvoll. Wenn eine Kombination für normalen Text knapp ausfällt, wähle besser eine dunklere Textfarbe, einen helleren Hintergrund oder eine insgesamt stärkere Trennung.
| Anzeige | Typische Bedeutung | Praktische Entscheidung |
|---|---|---|
| AA Normaltext | Geeignet für viele normale Textgrößen | Für Absätze, Labels und Menüeinträge bevorzugen |
| AA großer Text | Geeignet für größere oder kräftige Schrift | Für Überschriften prüfen, aber nicht automatisch für Fließtext übernehmen |
| AAA Normaltext | Strengerer Kontrast für besonders klare Lesbarkeit | Für zentrale Inhalte, Hilfetexte und lange Lesestrecken sinnvoll |
| Fehler bei HEX | Der eingegebene Farbwert ist nicht gültig | Sechs gültige HEX-Zeichen eintragen und erneut prüfen |
Kontrast Checker passt zu Aufgaben, bei denen Text und Hintergrund direkt zusammenarbeiten müssen. Dazu gehören Navigationslinks, Formularlabels, Fehlermeldungen, Statusbadges, Kartenüberschriften, Schaltflächen und kleine Hilfetexte. Gerade bei sekundären Textfarben wird der Kontrast oft zu schwach, weil dezente Grautöne auf hellen Flächen elegant aussehen, aber in kleiner Schrift schwer erkennbar werden.
Bei dunklen Oberflächen ist dieselbe Kontrolle wichtig. Helle Schrift auf fast schwarzem Hintergrund besteht häufig die Messung, während violette, blaue oder graue Akzenttexte schnell an Klarheit verlieren. Auch halbtransparente Farben verdienen Aufmerksamkeit, weil Deckkraft und Hintergrund gemeinsam den wahrgenommenen Farbwert verändern.
Wenn du mit einer Palette arbeitest, prüfe nicht nur die Hauptfarbe. Teste Hover-Zustände, deaktivierte Zustände, Fokusrahmen, Warnfarben und Links. Ein Farbton kann als großer Button funktionieren, aber als kleiner Textlink scheitern. Die Live-Vorschau macht diese Unterschiede leichter sichtbar, weil Zahl und visuelle Wirkung nebeneinander stehen.
Die sichtbaren Bedienelemente erfüllen unterschiedliche Aufgaben. Ein HEX-Feld ist präzise, der Farbwähler ist schneller für visuelle Anpassungen und die Regler helfen bei feinen Korrekturen, ohne eine Farbe komplett neu zu wählen.
| Element | Wofür es geeignet ist | Worauf du achten solltest |
|---|---|---|
| HEX Eingabe | Exakte Markenfarben, CSS-Werte und Design Tokens | Nur gültige drei- oder sechsstellige HEX-Werte verwenden |
| Farbwähler | Schnelles visuelles Ausprobieren | Nach der Auswahl Verhältnis und Lesbarkeitszeilen prüfen |
| Helligkeit | Feine Abstimmung von helleren oder dunkleren Varianten | Kleine Änderungen können Grenzwerte überschreiten oder unterschreiten |
| Deckkraft | Prüfung transparenter UI-Flächen | Transparenz kann lesbaren Kontrast deutlich verschlechtern |
| Farben tauschen | Schneller Vergleich von invertierten Paaren | Nicht jede invertierte Paarung wirkt gleich klar |
Ein praktischer Einsatz beginnt oft mit einer vorhandenen Markenfarbe. Wird sie als Hintergrund eingesetzt, sollte zuerst eine klare Textfarbe dagegen geprüft werden. Reicht Weiß nicht aus, kann ein dunklerer Hintergrundton oder eine stärker abgesetzte Textfarbe nötig sein. Wird dieselbe Markenfarbe als Textfarbe verwendet, muss sie gegen helle Flächen, Kartenhintergründe und Eingabefelder separat geprüft werden.
Bei Formularen ist der Kontrast besonders wichtig, weil Nutzer Labels, Hinweise und Fehlermeldungen schnell erfassen müssen. Ein roter Fehlertext kann auf Weiß gut lesbar sein, auf einem hellrosa Fehlerhintergrund aber zu schwach werden. Kontrast Checker zeigt solche Unterschiede sofort, ohne dass der ganze Komponentenaufbau nachgebaut werden muss.
Für Buttons zählt nicht nur die Beschriftung im Normalzustand. Prüfe auch Hover- und Fokusfarben, sofern sie andere Vordergrund- oder Hintergrundwerte verwenden. Eine Variante kann im Ruhezustand bestehen und im Hover-Zustand schwächer werden, wenn Hintergrund und Textfarbe näher zusammenrücken.
Eine sichere Prüfung kombiniert Zahlenwert, Ergebnisstatus und visuelle Kontrolle. Wenn die Vorschau schwer lesbar wirkt, auch wenn ein Grenzwert knapp bestanden wird, ist eine stärkere Kombination meist die bessere Entscheidung. Kontrast ist keine rein mathematische Designaufgabe; Schriftgröße, Schriftgewicht, Umgebungslicht und Displayqualität beeinflussen die tatsächliche Wahrnehmung.
Grenzfälle entstehen häufig, wenn eine Marke sehr helle Pastelltöne, gedämpfte Grautöne oder transparente Ebenen verwendet. Ein Ergebnis knapp über der Mindestanforderung kann technisch bestehen, aber im echten Layout trotzdem schwach wirken. Kleine Schrift, leichte Schriftstärken, schmale Buchstaben und niedrige Displayhelligkeit verschlechtern die praktische Lesbarkeit.
Arbeite deshalb mit Reserven. Wenn ein Paar nur knapp für normalen Text besteht, ist es oft besser, die Textfarbe etwas dunkler oder den Hintergrund etwas heller zu wählen. Bei dunklen Oberflächen gilt das Gegenteil: Ein leicht hellerer Text oder ein weniger gesättigter Hintergrund kann den Unterschied zwischen anstrengendem Lesen und klarer Führung ausmachen.
Kontrast Checker hilft auch bei Zuständen, die im Designprozess leicht übersehen werden. Hover-Farben, Fokuszustände, deaktivierte Schaltflächen und kleine Statuslabels sollten nicht nur dekorativ passen, sondern in der tatsächlichen Rolle lesbar bleiben. Prüfe solche Zustände einzeln, weil sie oft andere Farben, Transparenzen oder Hintergründe verwenden als die Standardkomponente.
| Grenzfall | Risiko | Bessere Kontrolle |
|---|---|---|
| Sehr dünne Schrift | Der Text wirkt schwächer als der Zahlenwert vermuten lässt | Höheres Verhältnis wählen oder Schriftgewicht erhöhen |
| Transparente Farbe | Der endgültige Farbwert hängt vom Hintergrund ab | Deckkraft im Prüfer anpassen und erneut bewerten |
| Pastell auf Weiß | Akzentfarbe verliert bei kleinen Texten Klarheit | Akzent abdunkeln oder nur als Fläche verwenden |
| Dunkelmodus | Gesättigte Farben können auf dunklen Flächen flimmern | Farbton entsättigen und Verhältnis neu prüfen |
Eine wiederholbare Prüfung spart später Korrekturaufwand. Lege für wiederkehrende Komponenten feste Farbpaarungen fest und prüfe neue Varianten gegen dieselben Anforderungen. So bleibt die Gestaltung konsistent, auch wenn weitere Seiten, Karten, Formulare oder Statusmeldungen hinzukommen.
Besonders bei langen Textpassagen lohnt sich ein höherer Sicherheitsabstand, weil Leser nicht jede Zeile unter idealen Lichtbedingungen sehen.
Diese Reserve ist oft wichtiger als ein optisch fast identischer Farbton im fertigen Layout.
Kontrast Checker ist ideal für ein einzelnes Farbpaarkontrollieren. Wenn mehrere Farben gleichzeitig verglichen werden sollen, ist Kontrast Checker Pro die passendere nächste Prüfung. Dort lassen sich Paletten, Bildfarben und Codewerte in einer Matrix vergleichen. Für ein einzelnes Text-Hintergrund-Paar bleibt Kontrast Checker schneller, weil alle Regler und Ergebnisse direkt auf die aktuelle Kombination ausgerichtet sind.
Für die Vorbereitung lohnt sich außerdem ein präziser Farbwert. Wenn ein Farbton zuerst gewählt oder korrigiert werden soll, hilft Farbwähler beim Kopieren sauberer HEX-, RGB- und HSL-Werte. Danach kann Kontrast Checker die ausgewählte Farbe gegen konkrete Hintergründe prüfen.