Kontextbasiertes Farbsystem
OKLCH · Surface-Modes · WCAG AA/AAA · Tailwind/shadcn — Live-Editor
Primary
50
oklch(0.97 0.027 155)
100
oklch(0.93 0.054 155)
200
oklch(0.86 0.090 155)
300
oklch(0.76 0.126 155)
400
oklch(0.66 0.153 155)
500
oklch(0.55 0.180 155)
600
oklch(0.47 0.180 155)
700
oklch(0.39 0.171 155)
800
oklch(0.31 0.153 155)
900
oklch(0.22 0.126 155)
Accent
50
oklch(0.97 0.033 165)
100
oklch(0.93 0.066 165)
200
oklch(0.86 0.110 165)
300
oklch(0.76 0.154 165)
400
oklch(0.66 0.187 165)
500
oklch(0.55 0.220 165)
600
oklch(0.47 0.220 165)
700
oklch(0.39 0.209 165)
800
oklch(0.31 0.187 165)
900
oklch(0.22 0.154 165)
Neutral
50
oklch(0.985 0.0150 155)
100
oklch(0.96 0.0150 155)
200
oklch(0.92 0.0150 155)
300
oklch(0.87 0.0150 155)
400
oklch(0.71 0.0150 155)
500
oklch(0.55 0.0150 155)
600
oklch(0.44 0.0150 155)
700
oklch(0.37 0.0150 155)
800
oklch(0.27 0.0150 155)
900
oklch(0.17 0.0150 155)
Kontrast-Prüfung
Button Primary
AA (6.5:1) Dark Text
AAA (17.0:1) Rich Dark
AAA (14.1:1) Light BG
AAA (18.3:1) Accent on Dark
AA (5.6:1) Accent Surface
AA (4.6:1) 💡 Warum ändern sich die Werte nicht bei Hue-Änderung?
WCAG-Kontrast basiert nur auf Luminanz (Helligkeit), nicht auf Farbton. In OKLCH bestimmt nur der L-Wert (Lightness) den Kontrast. Die Lightness-Stops sind fix (z.B. 500 = L:0.55), daher bleibt das Ratio konstant.
Test: Die Farben der Zellen oben ändern sich live — nur das Kontrast-Verhältnis bleibt gleich, weil die Helligkeit gleich bleibt.
WCAG-Kontrast basiert nur auf Luminanz (Helligkeit), nicht auf Farbton. In OKLCH bestimmt nur der L-Wert (Lightness) den Kontrast. Die Lightness-Stops sind fix (z.B. 500 = L:0.55), daher bleibt das Ratio konstant.
Test: Die Farben der Zellen oben ändern sich live — nur das Kontrast-Verhältnis bleibt gleich, weil die Helligkeit gleich bleibt.