OKLCH Contrast Checker
Check color contrast ratios for accessibility compliance using OKLCH colors with real-time WCAG evaluation.
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.
Foreground Color
Background Color
Actions
Preview
Sample Heading Text
This is sample paragraph text to test readability with your chosen color combination.
Small text example for detailed testing.
Contrast Results
Color Information
Foreground
#0e171ergb(14, 23, 30)hsl(204.95, 38.07%, 8.59%)oklch(20% 0.020 240)Background
#e9f0f5rgb(233, 240, 245)hsl(205.78, 36.37%, 93.6%)oklch(95% 0.010 240)