OKLCH Kontrast-Prüfer
Überprüfe Farbkontrastverhältnisse für Barrierefreiheit mit OKLCH-Farben und Echtzeit-WCAG-Bewertung.
How to use
Tune both colors
Adjust the OKLCH values for the foreground and background colors to see the contrast ratio update in real time.
Review WCAG results
Check whether the combination passes AA or AAA accessibility thresholds for normal and large text.
Preview real UI states
Switch between text, button, and card previews to understand how the pairing behaves in actual interfaces.
Generate new ideas
Use Randomize to explore fresh color pairs when you want inspiration or a quick starting point.
Copy the final values
Copy the resulting colors once you find a pair that looks right and meets your accessibility target.
Vordergrundfarbe
Hintergrundfarbe
Aktionen
Vorschau
Beispiel-Überschriftentext
Dies ist ein Beispiel-Absatztext zum Testen der Lesbarkeit mit Ihrer gewählten Farbkombination.
Kleiner Textbeispiel für detaillierte Tests.
Kontrast-Ergebnisse
Farbinformationen
Vordergrund
#0e171ergb(14, 23, 30)hsl(204.95, 38.07%, 8.59%)oklch(20% 0.020 240)Hintergrund
#e9f0f5rgb(233, 240, 245)hsl(205.78, 36.37%, 93.6%)oklch(95% 0.010 240)