Slop Colors · kostenlos, im Browser

Farbkontrast nach WCAG prüfen

Grauer Text auf Weiß sieht elegant aus, bis ihn niemand mehr lesen kann. Geben Sie die beiden Farben ein, und Slop Colors zeigt das WCAG-Verhältnis, welche Stufen bestanden werden und die nächste Textfarbe, die es schafft.

Kontrast prüfen

So geht es

Scrollen Sie zu Kontrastprüfung (WCAG 2) und geben Sie die Textfarbe und die Hintergrundfarbe ein, als HEX, RGB, HSL oder OKLCH.
Lesen Sie das Verhältnis und die fünf Ergebnisse ab: AA und AAA für normalen Text, AA und AAA für großen Text sowie UI-Teile und Grafiken.
Sehen Sie sich die Probe an: großer Text und ein Absatz in Ihren beiden Farben.
Wenn AA normaler Text nicht bestanden wird, klicken Sie auf Textfarbe korrigieren: Die Textfarbe behält ihren Farbton und wird gerade so hell oder dunkel, dass sie besteht.
Klicken Sie auf Tauschen, um die Farben umgekehrt zu prüfen.

Ihre Dateien bleiben auf diesem Gerät: Slop Colors läuft im Browser, ohne Upload, ohne Konto und ohne Wasserzeichen.

Fragen

Welche Verhältnisse verlangt WCAG?

Stufe AA verlangt 4.5:1 für normalen Text und 3:1 für großen Text (24 px oder 18.66 px fett) sowie für UI-Teile und Grafiken. Stufe AAA verlangt 7:1 und 4.5:1.

Warum steht dort 4.47 und nicht 4.48?

Das Verhältnis wird abgerundet, wie es der Checker von WebAIM anzeigt. So wird ein Paar mit 4.499 nie als Bestehen von 4.5 angezeigt.

Kann sie eine Farbe von meinem Bildschirm prüfen?

In Chrome und Edge übernimmt Vom Bildschirm aufnehmen jeden beliebigen Pixel auf Ihrem Bildschirm. Danach verwenden Sie ihn im Panel als Textfarbe oder als Hintergrund.

Wird etwas hochgeladen?

Nein. Die Farben werden von der Seite in Ihrem Browser geprüft; nichts wird irgendwohin gesendet.