Kontrastverhältnis
- AA normaler Text 4.5:1
- AA großer Text 3:1
- AAA normaler Text 7:1
- AAA großer Text 4.5:1
- UI-Elemente und Grafiken 3:1
Für alle lesbar
Eine große Zwischenüberschrift
Fließtext leidet am meisten unter geringem Kontrast, weil man ihn länger und in kleiner Schrift liest. Ein Textlink
Nächste bestehende Farben
Gespeicherte Farben
Farbkontrast-Prüfer
Prüfen Sie, ob Text auf seinem Hintergrund lesbar ist, bevor Sie ein Design veröffentlichen. Wählen oder tippen Sie eine Text- und eine Hintergrundfarbe, und der Prüfer zeigt das Kontrastverhältnis nach WCAG 2.x mit bestanden oder nicht bestanden für AA und AAA, für normalen und großen Text und für UI-Elemente. Live-Vorschau, Simulation von Farbenblindheit und Korrekturvorschläge helfen Ihnen, ein passendes Paar zu finden. Wählen Sie Text- und Hintergrundfarbe als HEX, RGB oder HSL. Das WCAG-Kontrastverhältnis, die AA- und AAA-Ergebnisse und die Vorschau aktualisieren sich beim Tippen, und die nächsten bestehenden Farben werden vorgeschlagen. Alles wird in diesem Browser gespeichert.
Wie es funktioniert
- Wählen Sie eine Text- und eine Hintergrundfarbe oder tippen Sie sie als HEX, RGB oder HSL ein. Stellen Sie die Textdeckkraft ein, wenn der Text halbtransparent ist.
- Lesen Sie das Kontrastverhältnis und die Ergebnisse für AA und AAA bei normalem Text, großem Text und UI-Elementen ab und prüfen Sie die Live-Vorschau.
- Übernehmen Sie bei einem Fehlschlag eine vorgeschlagene Farbe, speichern Sie gute Paare in Ihrer Palette und kopieren Sie das CSS in Ihr Projekt.
Lösungen statt nur Werte
Besteht ein Paar nicht, sucht der Prüfer die nächstliegende Text- und Hintergrundfarbe mit gleichem Farbton und gleicher Sättigung, die AA und AAA erreicht, und ein Klick übernimmt sie. Halbtransparenter Text wird zuerst mit dem Hintergrund gemischt, genau wie ein Browser ihn zeichnet.
Privat und mitnehmbar
Ihre Farben und Ihre Palette werden nur in diesem Browser gespeichert. Sichern Sie alles als JSON oder übertragen Sie es auf ein anderes Gerät, oder speichern Sie das Ergebnis als PDF oder Bild. Rückgängig und Wiederholen gelten für jede Änderung.
Häufig gestellte Fragen
Ist der Farbkontrast-Prüfer kostenlos?
Ja. Er ist kostenlos, braucht kein Konto und funktioniert in jedem modernen Browser.
Welches Verhältnis brauche ich?
WCAG-Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text und für UI-Elemente wie Eingaberahmen und Symbole. Stufe AAA verlangt 7:1 für normalen und 4,5:1 für großen Text.
Warum fällt 4,48 durch, obwohl es auf 4,5 gerundet wird?
Die WCAG-Grenzwerte sind exakt. 4,48:1 liegt unter 4,5:1 und besteht AA für normalen Text daher nicht. Der Prüfer vergleicht den ungerundeten Wert, die Ergebnisse sind also immer streng.
Verwandte Tools
Die Geschichte hinter dem Farbkontrast-Prüfer
Woher die WCAG-Kontrastwerte stammen: 4,5:1 und 7:1, relative Leuchtdichte aus sRGB, die 3:1-Regel für UI-Elemente aus WCAG 2.1, Farbenblindheit und APCA für WCAG 3.
Farbpaletten-Generator
Erstellen, sperren und mischen Sie Farbpaletten im Browser. Kopieren Sie HEX, CSS-Variablen oder JSON, exportieren Sie PNG oder SVG und extrahieren Sie Farben aus einem Foto.
Farbrad
Wählen Sie eine Farbe auf einem interaktiven Rad aus, erstellen Sie komplementäre, analoge, triadische und andere Paletten und kopieren Sie HEX, RGB, HSL, HSV oder CMYK.
Verlaufseditor
Erstellen Sie lineare und radiale CSS-Verläufe im Browser. Ziehen Sie Farbstopps, stellen Sie den Winkel ein und kopieren Sie CSS, HEX, RGB, HSL, HSV oder CMYK.
Farben
Wie Farbe auf Bildschirmen und im Druck funktioniert: RGB, CMYK, HSL, Hex, Farbrad, Verläufe, Kontrast und PictorX-Werkzeuge.
Bereit, es auszuprobieren?
Öffnen Sie PictorX in Ihrem Browser – keine Installation, zum Starten ist keine Kreditkarte erforderlich.
Zum Editor