Prüfe Kontrastverhältnisse zwischen Text und Hintergrund mit AA/AAA-Bewertung und Farbfehlsichtigkeits-Filter.
Kontrastverhältnis
12.3:1
WCAG 2.1 AA
WCAG 2.1 AAA
Dieser Text demonstriert die Lesbarkeit bei dem eingestellten Farbkontrast.
Automatisch anpassen, um den WCAG AA-Standard zu erreichen
Prüfe Kontrastverhältnisse zwischen Text und Hintergrund mit AA/AAA-Bewertung und Farbfehlsichtigkeits-Filter. Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.
Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.
Dieser Kontrast-Checker berechnet das Kontrastverhältnis zwischen Text- und Hintergrundfarbe nach der WCAG-2.1-Formel: Jede RGB-Farbe wird in relative Leuchtdichte umgerechnet, dann ergibt (hellere + 0,05) ÷ (dunklere + 0,05) einen Wert zwischen 1:1 und 21:1. Schwarz auf Weiß ist mit 21:1 das Maximum, identische Farben ergeben 1:1. Wählen Sie die Farben per Farbwähler oder HEX-Code; die Vorschau mit Beispieltext und Button aktualisiert sich sofort.
WCAG-Stufe AA verlangt für normalen Text mindestens 4,5:1, Stufe AAA 7:1; für großen Text (18 pt oder 14 pt fett) gelten 3:1 bzw. 4,5:1. Die AA- und AAA-Abzeichen im Tool beziehen sich auf die Werte für normalen Text. Gerundet werden darf nicht: #777777 auf Weiß kommt auf 4,47:1 und fällt trotz knappem Abstand durch, #767676 erreicht 4,54:1 und besteht AA. #595959 auf Weiß liegt bei etwa 7,00:1 und genügt AAA.
Fällt eine Kombination durch, hilft „Smart Fix“: Das Tool behält die Farbrichtung bei und hellt die Textfarbe auf dunklem Hintergrund schrittweise auf bzw. dunkelt sie auf hellem Hintergrund ab, bis 4,5:1 erreicht sind; gelingt das nicht, wird reines Schwarz oder Weiß gesetzt. So finden Sie schnell eine brauchbare Farbe, Markenfarben sollten aber noch von Designern feinjustiert werden.
Der Farbenblindheits-Simulator zeigt ein hochgeladenes Bild oder das Beispielbild so, wie es Menschen mit Protanopie, Deuteranopie, Tritanopie oder Achromatopsie wahrnehmen, berechnet über Farbmatrizen. Damit prüfen Sie, ob Diagramme, Karten oder Statusfarben nur über den Farbton unterscheidbar sind. Bilder werden auf maximal 800×600 verkleinert und im Browser per Canvas verarbeitet, nicht hochgeladen. Die Simulation ist eine Annäherung; das Farbsehen ist individuell verschieden.
Normaler Text braucht für WCAG AA mindestens 4,5:1 und für AAA 7:1. Großer Text (18 pt oder 14 pt fett) braucht 3:1 für AA und 4,5:1 für AAA. Nicht-Text-Elemente wie Icons oder Eingabefeldrahmen benötigen nach WCAG 2.1 mindestens 3:1.
Die WCAG-Werte sind strikte Mindestgrenzen und dürfen nicht gerundet werden. Das Tool zeigt zwei Nachkommastellen und rundet ab, damit kein Wert wie 4,5:1 aussieht und trotzdem durchfällt.
Es ändert nur die Helligkeit der Textfarbe, der Hintergrund bleibt gleich. Das Ergebnis behält einen ähnlichen Farbton oder wird Schwarz bzw. Weiß, wenn nichts anderes reicht. Um die Markenfarbe zu erhalten, passen Sie den Hintergrund an oder nutzen die Originalfarbe nur für großen Text und Dekoration.
Nein. Der Browser liest das Bild ein und wendet die Farbmatrix auf einem Canvas an, alles bleibt auf Ihrem Gerät. Die Filter sind gängige Näherungen und eignen sich gut, um Designs zu finden, die Informationen nur über Farbe vermitteln.
Kategorie ansehen: Design & Farben
Erzeuge Partikel, elastische Körper, Kollisionen und Gravitationsfelder in Echtzeit mit HTML5 Canvas.
Setze Ankerpunkte, ziehe Bézier-Griffe auf einer 500×500-Fläche und erhalte sofort das d-Attribut des SVG-Pfads und eine CSS-Regel clip-path: path().
Setze Screenshots in ein elegantes Browserfenster im macOS-Stil mit Schatten und Farbverlauf und lade sie als hochauflösendes PNG herunter.
Erstelle leuchtende Neonschriftzüge mit anpassbaren Farben, Pulsieren und exportierbarem CSS-Code.
