Der Farbkontrast-Checker, der die Farbe selbst korrigiert
Die meisten Tools messen nur das Verhältnis. OKLCH Studio zeigt WCAG 2.1 und APCA und Fix verschiebt die Texthelligkeit bis AA — Farbton und Chroma bleiben. Dazu OKLCH-Farbwähler und Fotopalette ohne Upload.
Zuerst Fix, dann verfeinern
Kontrast öffnen, Text und Fläche setzen, WCAG/APCA lesen, Fix drücken. Vorher/nachher mit Undo — barrierefreier Text ohne neues Brand-Rot.
OKLCH-Picker für präzise Tokens
L×C-Ebene, eigener Hue-Slider, Live-UI, Harmonien, Export nach HEX, oklch(), CSS, SCSS, Tailwind v4 @theme, JSON, PNG oder SVG.
Tailwind- und CSS-Farbnamen
Englische Referenzseiten: jede Tailwind-v4-Stopfarbe und gängige CSS-Namen mit oklch(), Kontrastpaaren und Deep-Links in dieses Fix-Tool.
Wann dieses Tool nutzen
Wenn UI-Kontrast scheitert, wenn Sie OKLCH-Tokens für Tailwind v4 brauchen oder Paletten aus Screenshots ohne Cloud-Upload wollen.
Typische Fehler
HSL-Helligkeit für Barrierefreiheit, Kontrast durch Hue-Drehung „reparieren“ oder Fotos hochladen, obwohl lokales Clustering reicht.
CSS nach Fix
Textfarbe als oklch() oder HEX in Variablen oder @theme übernehmen.
:root {
--text: oklch(0.35 0.08 250);
--surface: oklch(0.97 0.01 250);
}