Zum Werkzeug

Kontrastcheck mit Fix

WCAG und APCA zusammen lesen, dann Fix — vorher/nachher mit Undo. Deep-Links für Slack und Notion.

Full studio here. Need pairs, names, or brand-from-URL? Colorise Pro. · About

Pick
Photo
Read

Kontrast-Workflow

  1. 01

    Paar setzen

    HEX oder aus Palette.

  2. 02

    Lesen

    WCAG + APCA.

  3. 03

    Fix

    AA erreichen, Link kopieren.

WCAG-Kontrastprüfung mit Fix

Diese Seite ist der Kontrast-Checker: WCAG 2.1 + APCA, Fix für AA mit Hue-Erhalt. Picker und Foto haben eigene Landings.

WCAG und APCA

Normaler Text AA 4,5:1, großer Text 3:1, dazu APCA Lc als zweite Meinung.

Fix ohne Hue-Drift

Nur OKLCH-L wird verschoben — Specimens vorher/nachher, Undo inklusive.

Tailwind-Stops auditieren

Referenz z. B. blue-500 mit Kontrast auf Weiß und vorgefülltem Fix-Link.

Beispiel blue-500 (EN) →Alle Tailwind-Farben →

Einsatz für Fix

Body-Text auf Brandfarben, Tailwind-Audits, EAA-Reviews.

Fehler

Nur Buttons prüfen, Large-Text-Schwellen verwechseln, Hue statt L ändern.

Deep-Link

?fg=&bg= für geteilte Paare.

/* /de/contrast?fg=…&bg=… */

FAQ

Wie funktioniert Fix?

Hue/Chroma bleiben, L bis WCAG AA normaler Text.

Links teilen?

Copy link — fg/bg in der URL für Kolleg:innen.