Farbkontraste prüfen für Webdesign.
Mit dem kostenlosen Farbkontrast-Checker prüfst du das Kontrastverhältnis von Vorder- und Hintergrundfarbe – und siehst sofort, ob die Kombination die WCAG-Anforderungen erfüllt.
Kontrast jetzt prüfen.
Prüfe das Kontrastverhältnis von Vordergrund- und Hintergrundfarben deiner Webseite.
Kleiner Beispieltext für Fließtext.
Großer Beispieltext
| WCAG Standard | Kleiner Text | Großer Text / UI |
|---|---|---|
| AA | — | — |
| AAA | — | — |
Kontrastverhältnis von Hintergrund- und Vordergrundfarben testen
Mit dem Farbkontrast-Checker oben kannst du das Kontrastverhältnis von Hintergrund- und Vordergrundfarben deiner Webseite prüfen. So erkennst du schnell, ob Text gut lesbar ist oder ob die Farbkombination zu schwach ausfällt.
Warum das Kontrastverhältnis wichtig ist
Ein ausreichendes Kontrastverhältnis sorgt dafür, dass Texte, Buttons und andere Inhalte klar erkennbar bleiben. Besonders bei modernen Webseiten mit hellen oder dunklen Flächen ist es wichtig, dass Farben gut voneinander abgegrenzt sind.
Wenn du zusätzlich passende Farbkombinationen entwickeln möchtest, hilft dir mein Farbpalette Generator.
Lesbarkeit verbessern
Wenn Text sich deutlich vom Hintergrund abhebt, können Besucher Inhalte schneller und besser erfassen.
Barrierefreiheit beachten
Ein guter Kontrast hilft dabei, Webseiten für mehr Menschen besser nutzbar zu machen.
Typische Problemstellen
Schwache Kontraste entstehen oft bei hellgrauem Text auf weißem Hintergrund oder bei Buttons mit zu wenig Farbunterschied.
WCAG-Kontrast verstehen
Die WCAG-Richtlinien helfen dabei, geeignete Kontraste für Webinhalte zu bewerten. Je nach Anwendung sollten bestimmte Mindestwerte erreicht werden, damit Texte und Bedienelemente gut lesbar bleiben.
| Inhalt | WCAG AA | WCAG AAA |
|---|---|---|
| Normaler Text (unter 24px bzw. unter 18,66px fett) | mindestens 4,5 : 1 | mindestens 7 : 1 |
| Großer Text (ab 24px bzw. ab 18,66px fett) | mindestens 3 : 1 | mindestens 4,5 : 1 |
| Bedienelemente und Grafiken (Rahmen, Icons) | mindestens 3 : 1 | – |
Das Verhältnis reicht von 1 : 1 (gleiche Farbe) bis 21 : 1 (Schwarz auf Weiß). Berechnet wird es aus der relativen Helligkeit (Luminanz) beider Farben.
Geeignet für viele Einsatzbereiche
Der Farbkontrast Checker eignet sich für Webseiten, WordPress-Themes, Landingpages, UI-Design und andere digitale Oberflächen, bei denen gute Lesbarkeit wichtig ist – auch für den Dark Mode, den du im Tutorial Theme umschalten umsetzen kannst.
Fazit
Mit diesem Tool kannst du schnell prüfen, ob Vordergrund- und Hintergrundfarben ausreichend Kontrast haben. So erkennst du früh, ob eine Farbkombination die Lesbarkeit verbessert oder eher verschlechtert.
Weiterlernen
Passende Farbkombinationen findest du mit dem Farbpalette Generator. Besonders wichtig sind gute Kontraste beim Dark Mode, bei einem Cookie Banner und bei Icons aus der Icon-Kollektion. Auch ein QR-Code braucht hohen Kontrast, damit er sicher scannt – erstelle ihn mit dem QR-Code Generator.
Du möchtest eine Webseite, die gut lesbar und barrierearm ist? Ich gestalte Webdesign mit geprüften Kontrasten.
FAQ: Farbkontraste
Kontrast, PageSpeed und WCAG kurz erklärt
Warum zeigt PageSpeed den Hinweis zum Kontrast an?
PageSpeed weist darauf hin, wenn das Kontrastverhältnis von Hintergrund- und Vordergrundfarben zu gering ist. Das bedeutet oft, dass Text schwer lesbar sein kann und die Darstellung für viele Nutzer nicht optimal ist.
Was bedeutet die Meldung „Das Kontrastverhältnis ist nicht ausreichend“?
Diese Meldung erscheint, wenn Farben zu wenig voneinander abheben. Vor allem Text mit geringem Kontrast kann für viele Nutzer schlecht oder gar nicht lesbar sein.
Wie hilft mir diese Seite dabei?
Mit dem Farbkontrast-Checker kannst du Vordergrund- und Hintergrundfarben direkt prüfen und sehen, ob der Kontrast ausreicht. So erkennst du früh, welche Farbkombinationen besser lesbar sind.
Warum ist das für Barrierefreiheit wichtig?
Ein ausreichender Kontrast verbessert die Lesbarkeit und hilft dabei, Webseiten barriereärmer zu gestalten. Besonders bei kleineren Schriften, Buttons und wichtigen Hinweisen ist das sehr wichtig.
Kann ich eigene Farben direkt testen?
Ja, du kannst eigene HEX-Farben eingeben oder mit dem Farbwähler auswählen. So lässt sich schnell prüfen, ob deine Farbkombination den Kontrast-Anforderungen besser entspricht.
Für welche Inhalte ist der Kontrast besonders wichtig?
Vor allem für Fließtext, Überschriften, Buttons und Navigationen. Überall dort, wo Nutzer Inhalte schnell erfassen müssen, ist ein guter Farbkontrast entscheidend.
Hilft der Checker auch bei der Gestaltung vor dem Livegang?
Ja, genau dafür ist er praktisch. Du kannst Farben schon vor dem Veröffentlichen testen und so Probleme mit Lesbarkeit und Barrierefreiheit vermeiden.
Welche WCAG-Werte gelten für normalen Text?
Für normalen Text verlangt WCAG AA ein Kontrastverhältnis von mindestens 4,5 : 1, für AAA mindestens 7 : 1. Große Schrift ab 24px (oder 18,66px fett) braucht für AA mindestens 3 : 1.
Was ist der Unterschied zwischen AA und AAA?
AA ist die häufig genutzte Mindestanforderung für gute Lesbarkeit. AAA ist strenger und steht für noch bessere Kontraste. Welche Stufe sinnvoll ist, hängt von Inhalt und Einsatz ab.
Wie prüfe ich Kontraste in CSS oder HTML?
Du kannst Kontraste mit einem Tool wie diesem prüfen, indem du Vordergrund- und Hintergrundfarben eingibst. So siehst du sofort, ob die gewählte Kombination ausreichend lesbar ist. Auch die Entwicklertools in Chrome und Firefox zeigen beim Untersuchen eines Elements das Kontrastverhältnis an.
Welche Farben sind besonders problematisch?
Besonders kritisch sind oft sehr ähnliche Farbtöne, zum Beispiel hellgrau auf weiß oder dunkelgrau auf schwarz. Auch kräftige Farben können problematisch sein, wenn sie zu nah beieinander liegen.
Weiter lernen.
Keine Zeit, es selbst umzusetzen? Ich baue Ihre Webseite schnell und sauber.
Jetzt kontaktieren