Kontrast Checker: Website-Farben live prüfen

Prüfen Sie Text- und Hintergrundfarben direkt im Browser. Der Kontrast Checker zeigt WCAG AA/AAA, normale und grosse Schrift sowie eine realistische Website-Vorschau.

KostenlosBrowser-onlyKeine RegistrierungWCAG 2.2

WCAG 2.2 · Live-Prüfung

Kontrast Checker

Testen Sie Text- und Hintergrundfarben direkt im Browser. Die Vorschau zeigt sofort, ob Ihre Farbkombination auf einer Website lesbar genug wirkt.

1Farben einsetzenHEX eintragen oder Picker öffnen.
2Wert lesen4.5:1 ist der AA-Wert für normalen Text.
3Vorschau prüfenSehen, wie Text, Button und Feld wirken.

Beispiele

Zum Ausprobieren. Ein Klick füllt die Eingabefelder unten.

AuswertungErgebnis Ihrer Eingabe

21.0:1

Sehr gut: Diese Farben sind auch für kleine Texte klar lesbar.

Normaler Textmindestens 4.5:1PasstGrosse Schriftmindestens 3:1PasstUI-Komponentenmindestens 3:1PasstAAAnormaler Text ab 7:1AAA erfüllt

VorschauNur zur Kontrolle

Live-Vorschau

Eine Website muss zuerst lesbar sein.

Guter Kontrast hilft Besuchern, Angebote, Preise und Kontaktmöglichkeiten schneller zu erfassen.

Beispiel-Link prüfenE-Mail-Feld

Kurze KarteAuch kleine Flächen und Labels müssen erkennbar bleiben.

Farboptionen vergleichen

Welche Farbe passt zur Referenz?

Prüfen Sie mehrere mögliche Marken-, Button- oder Textfarben gleichzeitig gegen dieselbe Referenzfarbe. So sehen Sie schneller, welche Option lesbar ist und visuell gut zusammenspielt.

EingabeReferenzfarbe festlegen

Referenzfarbe meist Hintergrund

Alle Farboptionen werden gegen diese Farbe geprüft.

AuswertungBeste Option

Die beste Farbe wird hier automatisch angezeigt.

Option 1Prüfen

BeispieltextButton · Link · Label

Option 2Prüfen

BeispieltextButton · Link · Label

Option 3Prüfen

BeispieltextButton · Link · Label

Option 4Prüfen

BeispieltextButton · Link · Label

Option 5Prüfen

BeispieltextButton · Link · Label

Wie es funktioniert

In drei Schritten zu lesbaren Website-Farben

Keine Registrierung, kein Scan, keine Datenübertragung. Farben eintragen und sofort sehen, ob die Kombination auf einer Website lesbar genug ist.

Farben eintragen

Geben Sie Text- und Hintergrundfarbe als HEX-Wert ein oder wählen Sie die Farben direkt über den Farbwähler.

Kontrast lesen

Der Checker berechnet das Kontrastverhältnis und zeigt sofort, ob normale Schrift, grosse Schrift und UI-Elemente die WCAG-Werte erreichen.

Vorschau prüfen

Die Live-Vorschau zeigt, wie die Farbkombination auf Überschriften, Fliesstext, Buttons, Links und Formularen wirkt.

Lesbarkeit & Barrierefreiheit

Farbkontrast prüfen, bevor Besucher abspringen

Schwache Kontraste sehen oft nur im Designprogramm elegant aus. Auf echten Displays entscheiden sie darüber, ob Texte, Buttons und Formulare sofort verstanden werden.

01

Lesbarkeit sichern

Texte müssen auch auf hellen Displays, mobilen Geräten und bei schnellem Scannen klar erkennbar bleiben.

02

WCAG-Werte prüfen

Der Checker bewertet normale Schrift, grosse Schrift, UI-Komponenten und AAA-Kontrast getrennt.

03

Design früh korrigieren

Ein Farbpaar lässt sich im Entwurf einfacher verbessern als später in Buttons, Formularen und Templates.

Nutzen

Warum Kontrast mehr ist als ein Accessibility-Häkchen

Ein guter Farbkontrast hilft nicht nur Menschen mit Sehschwäche. Er macht Ihre Website für alle leichter lesbar: unterwegs am Handy, in hellen Büros, auf älteren Bildschirmen und bei kurzen Entscheidungsfenstern.

Für KMU-Websites ist das direkt geschäftsrelevant. Wenn Preisinformationen, Kontakt-Buttons oder Formularlabels zu leise wirken, sinkt die Chance, dass Besucher den nächsten Schritt machen. Gute Farben führen, ohne laut zu sein.

WCAG

Welche Kontrastwerte gelten für Websites?

Die Web Content Accessibility Guidelines definieren Kontrast als Verhältnis zwischen der relativen Helligkeit zweier Farben. Der Wert reicht von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiss.

Anwendung	WCAG AA	WCAG AAA	Typische Stelle
Normaler Text	4.5:1	7:1	Fliesstext, Navigation, Labels
Grosse Schrift	3:1	4.5:1	Headlines, grosse Teaser
UI-Komponenten	3:1	-	Input-Rahmen, Icons, grafische Zustände

Offizielle Grundlage sind die W3C-Kriterien1.4.3 Contrast (Minimum),1.4.6 Contrast (Enhanced)und1.4.11 Non-text Contrast.

Praxis

Normale Schrift, grosse Schrift und UI-Komponenten getrennt betrachten

Eine Farbkombination kann für eine grosse Headline ausreichen und trotzdem für Fliesstext scheitern. Darum zeigt der Checker die Ergebnisse getrennt. Gerade kleine Labels, Footer-Links, Fehlermeldungen und Formularhinweise sind oft kritischer als grosse Hero-Texte.

Grosse Schrift

Mehr Fläche und Strichstärke machen Buchstaben leichter erkennbar. Deshalb erlaubt WCAG AA hier 3:1.

Normaler Text

Fliesstext, Menüs und kleine Labels brauchen mindestens 4.5:1, weil sie schneller unlesbar werden.

Fehler

Typische Kontrastprobleme auf Schweizer KMU-Websites

Zu helle Grautöne: Sekundärtexte, Footer-Links und Formularhinweise wirken im Design ruhig, sind live aber schwer lesbar.
Markenfarbe als Textfarbe: Ein schönes Blau, Grün oder Orange kann auf Weiss zu wenig Kontrast haben.
Buttons ohne klare Zustände: Hover-, Fokus- und Disabled-Zustände werden oft schwächer als der normale Button.
Text auf Bildern: Hintergründe verändern sich je nach Bildausschnitt, wodurch der echte Kontrast schwankt.
Mobile Nutzung vergessen: Kleine Schrift und Sonnenlicht machen knappe Kontraste deutlich riskanter.

Grenzen

Was der Checker nicht automatisch beurteilt

Der Kontrastwert ist ein wichtiger Startpunkt, aber nicht die ganze Barrierefreiheit. Eine Website muss auch per Tastatur bedienbar sein, klare Fokuszustände haben, Formulare verständlich beschriften und Inhalte semantisch sauber auszeichnen.

Für die spätere Weiterentwicklung wäre ein APCA-Hinweis denkbar. Für diese Version bleibt WCAG 2.2 bewusst die Grundlage, weil sie aktuell der etablierte Standard für Website-Prüfungen ist.

Häufig gestellte Fragen zum Kontrast Checker

Was prüft der Kontrast Checker?

Der Kontrast Checker berechnet das Verhältnis zwischen Textfarbe und Hintergrundfarbe. Danach zeigt er, ob die Kombination die WCAG-Werte für normalen Text, grosse Schrift, UI-Komponenten und AAA-Kontrast erreicht.

Welche Kontrastwerte gelten nach WCAG?

Für normalen Text braucht WCAG AA mindestens 4.5:1. Für grosse Schrift und wichtige UI-Komponenten reichen 3:1. Für AAA-Kontrast gelten 7:1 bei normalem Text und 4.5:1 bei grosser Schrift.

Warum ist Farbkontrast für KMU-Websites wichtig?

Zu schwache Kontraste machen Texte, Buttons und Formularfelder schwer lesbar. Das betrifft Menschen mit Sehschwäche, Nutzer auf hellen Displays und alle, die eine Website schnell erfassen wollen.

Werden meine Farben gespeichert?

Nein. Der Kontrast Checker läuft vollständig im Browser. Die eingegebenen Farben werden nicht an Garçon Studios gesendet und nicht gespeichert.

Ersetzt der Checker ein vollständiges Accessibility-Audit?

Nein. Das Tool prüft gezielt den Farbkontrast eines Farbpaares. Eine vollständige Barrierefreiheitsprüfung umfasst zusätzlich Tastaturbedienung, Semantik, Fokuszustände, Formulare, Medien und weitere WCAG-Kriterien.

Soll ich nur auf AA oder direkt auf AAA optimieren?

AA ist der sinnvolle Mindeststandard für die meisten Websites. AAA ist für besonders wichtige Texte, kleine Schrift oder Zielgruppen mit erhöhtem Lesbarkeitsbedarf empfehlenswert, aber nicht immer für jedes Design realistisch.

Nächste Schritte

UI/UX Design prüfen lassen

Von lesbaren Farben bis zu klaren Nutzerwegen — wir gestalten Websites, die gut aussehen und funktionieren.

UI/UX Design prüfen lassen Projekt besprechen

Dieses Tool ist Teil von Garçon Labs →