Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.
AaBbCcDdEeFf 0123456789 - Textvorschau in diesem Farbpaar.
Was es tut
Berechnet das WCAG-2.2-Kontrastverhältnis zwischen einer Vordergrund- und einer Hintergrundfarbe und bewertet es gegen die Accessibility-Schwellen: AA für normalen Text (≥ 4.5:1), AA large für großen Text (≥ 3:1) und AAA (≥ 7:1). Die Mathematik ist die echte Relative-Luminanz-Formel - jeder sRGB-Kanal wird linearisiert, mit den WCAG-Koeffizienten kombiniert, und das Verhältnis ist (lighter + 0.05) / (darker + 0.05).
Das Tool akzeptiert #rgb- und #rrggbb-Hex-Farben (Groß-/Kleinschreibung egal, mit oder ohne führendes #), zeigt Pass/Fail-Badges für alle drei Schwellen gleichzeitig an und rendert ein Live-Vorschau-Panel - ein Pangramm und eine Zeichen-/Zahlenzeile, gemalt in deinem exakten Farbpaar. 100 % clientseitig.
So verwendest du es
- Setze die Vordergrundfarbe: klicke auf den Swatch, um einen Color Picker zu öffnen, oder tippe einen Hex-Wert in das Textfeld.
- Setze die Hintergrundfarbe auf dieselbe Weise. Das Tool startet auf
#e9e9f1auf#07070b- ein Paar, das nach Konstruktion AAA besteht. - Klicke auf Swap, um die beiden Farben zu tauschen - nützlich, um die Varianten dunkel-auf-hell und hell-auf-dunkel eines Themes zu prüfen.
- Lies das Ergebnis: das Verhältnis (2 Dezimalstellen) plus die drei Badges AA, AA large, AAA, je grün (bestanden) oder rot (gefallen).
- Prüfe den Vorschau-Block darunter - dein Text im gewählten Paar - um ihn mit eigenen Augen zu beurteilen.
- Ist einer der Werte keine gültige Hex-Farbe, zeigt das Tool einen Fehler und versteckt die Ergebnisse, bis du ihn korrigierst.
Beispiele
Verifiziert durch Aufruf von contrastRatio() aus src/lib/color.ts (exakt die Funktion, die das Tool nutzt):
#e9e9f1 on #07070b 16.65:1 AA pass · AA large pass · AAA pass (tool defaults)
#ffffff on #000000 21.00:1 AA pass · AA large pass · AAA pass (the maximum)
#f8fafc on #1e293b 13.98:1 AA pass · AA large pass · AAA pass
#abc on #000000 10.69:1 AA pass · AA large pass · AAA pass (3-digit shorthand works)
#767676 on #ffffff 4.54:1 AA pass · AAA fail (the classic "just barely AA" gray)
#777777 on #ffffff 4.48:1 AA fail · AA large pass (one notch darker fails AA)
#3b82f6 on #ffffff 3.68:1 AA fail · AA large pass (Tailwind blue-500 on white)Das Paar #767676 vs. #777777 zeigt, warum exakte Mathematik das Augenschätzen schlägt: Eine Hex-Differenz von einer Einheit überquert die 4.5:1-Linie von AA.
Gut zu wissen
- Privat: die gesamte Rechnung läuft in deinem Browser; nichts wird irgendwohin gesendet.
- Benannte Farben (
red,white) und andere CSS-Farbformate werden abgelehnt - nur Hex. Gib#rgboder#rrggbbein. - Es gibt kein separates AAA-large-Badge; das Tool zeigt AA (normal), AA large und AAA (normal) exakt wie kodiert.
- Das Verhältnis ist symmetrisch - das Tauschen von Vorder- und Hintergrund ändert nie die Zahl, nur die Richtung, in der du die Vorschau liest.
- Verwandte Tools: Color Picker & Converter, Color Palette Generator, CSS Gradient Generator