Schwellenwerte für AA und AAA
Normaler Text benötigt 4,5:1 für AA und 7:1 für AAA. Für großen Text gelten 3:1 beziehungsweise 4,5:1.
Farbkontrast prüfen
Vergleiche Text- und Hintergrundfarbe mit den WCAG-Anforderungen für AA und AAA. Probiere eine Anpassung aus oder speichere das Farbpaar.
Modus wählen
Text
Hintergrund
Beispielüberschrift
Vergleiche hier die gewählte Text- und Hintergrundfarbe. Prüfe die Grenzwerte für die tatsächliche Schriftgröße und Schriftstärke.
Kleiner Text: Prüfe die Lesbarkeit deiner Farben bei verschiedenen Schriftgrößen.
Weitere Aktionen
Ähnliche Tools
Deine Statistiken
0
Gewählte Farben
0
Exportierte Paletten
0
Erstellte Verläufe
0
Kontrastprüfungen
Farbwähler
Meistgenutzter Modus
0%
Aktivitätswert
So prüfst du den Farbkontrast
Das Video konnte nicht geladen werden. Du kannst weiterhin der Anleitung unten folgen.
Das Video zeigt die englische Oberfläche.
Gib HEX-Werte mit # ein oder nutze die Farbfelder. Prüfe, ob beide Eingaben gültig sind. Vorschau und Kontrastverhältnis aktualisieren sich bei Farbänderungen.
Text und Hintergrund zusammen prüfen
Verhältnis und Vorschau direkt sehen
Änderst du eine Farbe, aktualisieren sich Verhältnis und Beispieltext. Die Größenwahl ändert die Vorschau. Alle vier Prüfergebnisse bleiben sichtbar.
Eine Anpassung ausprobieren
An AA anpassen und An AAA anpassen versuchen, die Textfarbe anzupassen. Das gelingt nicht bei jedem Hintergrund. Prüfe deshalb das neue Verhältnis.
3 weitere anzeigenWeniger anzeigen
Annähernde Farbfilter
Protanopie, Deuteranopie und Tritanopie wenden einfache visuelle Filter an. Sie belegen keine Lesbarkeit für Menschen mit einer Farbsehschwäche.
Ein Farbpaar speichern
Speichere Text- und Hintergrundfarbe unter einem Namen in diesem Browser. Über Vorlagen lädst du sie wieder.
Weitere Farbwerkzeuge
Die Moduslinks öffnen eigene Seiten für Farbauswahl, Paletten, Farbverläufe oder Farben aus Bildern.
Häufige Fragen
Wie prüfe ich den Farbkontrast?
Wähle Text- und Hintergrundfarbe oder gib sechsstellige HEX-Werte ein. Lies das Verhältnis und die vier Ergebnisse für AA und AAA ab. Ein bestandenes Ergebnis gilt für dieses Farbpaar und die jeweilige Textkategorie, nicht für eine ganze Website.
Welches Kontrastverhältnis verlangt WCAG?
Für normalen Text verlangt AA mindestens 4,5:1 und AAA mindestens 7:1. Für großen Text gelten 3:1 für AA und 4,5:1 für AAA. Ausnahmen gibt es etwa für Logos und inaktive Bedienelemente.
Lässt sich der Kontrast automatisch anpassen?
An AA anpassen und An AAA anpassen versuchen, den Text durch Änderungen der RGB-Kanäle aufzuhellen oder abzudunkeln. Dabei kann sich der Farbton ändern. Je nach Hintergrund kann der Versuch scheitern. Prüfe nach jeder Anpassung das Verhältnis.
Simulieren die Vorschauen Farbsehschwächen genau?
Sie verwenden einfache Filter für Sepia, Sättigung und Farbton. Betrachte sie als grobe Vorschau. Es sind keine validierten Modelle des Farbsehens, und sie bestätigen keine Barrierefreiheit.
4 weitere anzeigenWeniger anzeigen
Was zählt als großer Text?
WCAG zählt Text ab 18 pt in normaler Schriftstärke oder 14 pt in Fettschrift als groß. In CSS entspricht das ungefähr 24 px beziehungsweise 18,67 px. Die Vorschaugröße legt nicht fest, welcher Schwellenwert für deinen tatsächlichen Entwurf gilt.
Ist die Kontrastprüfung kostenlos?
Ja. MORELESS bietet das Werkzeug kostenlos und ohne Konto an. Die Farbberechnungen laufen in diesem Browser.
Kann ich meine Markenfarben prüfen?
Ja. Gib die HEX-Werte für Text und Hintergrund direkt ein. Das Paar lässt sich unter einem Namen in diesem Browser speichern. Prüfe jede tatsächlich verwendete Kombination aus Text und Hintergrund einzeln.
Wie öffne ich die anderen Farbwerkzeuge?
Nutze die Moduslinks oberhalb der Kontrastprüfung. Sie öffnen eigene Seiten für Farbauswahl, Farben aus Bildern, Paletten und Farbverläufe.
Technische Details
Relative Leuchtdichte
Das Verhältnis ergibt sich aus der relativen Leuchtdichte zweier sRGB-Farben. Es reicht von 1:1 für gleiche Farben bis 21:1 für Schwarz und Weiß. Geprüft werden zwei einfarbige Flächen, kein Screenshot einer Seite.
Schwellenwerte für Textkontrast
Alle vier Ergebnisse beruhen auf dem ungerundeten Verhältnis. AA verlangt 4,5:1 für normalen und 3:1 für großen Text. Für AAA gelten 7:1 und 4,5:1. Diese Prüfungen allein belegen keine vollständige WCAG-Konformität.
2 weitere anzeigenWeniger anzeigen
Annähernde Vorschaufilter
Die drei benannten Farbseh-Vorschauen wenden CSS-Filter für Sepia, Sättigung und Farbtondrehung auf den Beispielbereich an. Sie ändern weder das angezeigte Kontrastverhältnis noch bilden sie ein validiertes Modell des Farbsehens ab.
Anpassung und Speicherung
Die Anpassung verändert alle drei RGB-Kanäle des Textes schrittweise, bis das Ziel erreicht ist oder der Versuch endet. Sie garantiert weder das Bestehen noch einen unveränderten Farbton. Benannte Farbpaare werden lokal in IndexedDB gespeichert.