OKLCH Contrast Checker
Check WCAG 2.x color contrast ratios with live OKLCH and OKLab controls. Test foreground/background pairs for AA and AAA compliance and view the perceptual OKLab Delta-E. Free, in-browser accessibility tool for designers and developers.
Loading tool...
What is OKLCH Contrast Checker?
The OKLCH Contrast Checker is a free in-browser accessibility tool that evaluates the color contrast between a foreground (text) and background color using two complementary metrics: the official WCAG 2.x relative-luminance contrast ratio and the perceptual OKLab Delta-E color distance. Unlike a plain contrast tool, it lets you adjust each color directly in the OKLCH perceptual color space with Lightness, Chroma, and Hue sliders, so you can see exactly how a perceptually even change in L, C, or H affects accessibility. Results update live as a WCAG ratio, AA/AAA pass-fail badges for normal text, large text, and graphical objects, and a live preview of real UI elements. All color math runs entirely in your browser with no data sent anywhere.
Key Benefits
- Combines the official WCAG 2.x ratio with perceptual OKLab Delta-E so you judge contrast the way the eye sees it
- Edit colors in OKLCH where equal Lightness steps look equally different across the whole color wheel
- AA/AAA compliance grid covers normal text, large text, and graphical objects in one scannable view
- Live preview renders real buttons, outline buttons, and body text so you see results in context
- 100% client-side with no network calls, no sign-up, and full offline support
Common Use Cases
- •Accessibility audits: verify foreground/background pairs meet WCAG 2.1/2.2 AA or AAA before shipping
- •Design systems: tune OKLCH Lightness ramps to maintain perceptual contrast across a palette
- •Modern CSS: pick oklch() values that pass contrast while staying perceptually consistent
- •Component libraries: validate button, outline, and text colors against both WCAG and Delta-E
- •Education: demonstrate how perceptual OKLab distance differs from WCAG luminance ratio
How to Use the OKLCH Contrast Checker
- Enter or pick your colors: Type a hex code, use the native color picker, or drag the OKLCH Lightness, Chroma, and Hue sliders for the foreground and background. Everything updates live.
- Read the contrast ratio: The large number shows the WCAG 2.x contrast ratio (e.g. 7.2:1). Next to it, the OKLab Delta-E measures the perceptual color distance between the two colors.
- Check the AA/AAA grid: The compliance grid shows pass/fail for WCAG AA and AAA across normal text, large text, and graphical objects. Green means pass, red means fail.
- Preview and copy: Scroll to the live preview to see real buttons and body text. Use Copy ratio to grab the contrast value, or Swap and Random to explore alternatives quickly.
Key Features
- Dual-metric contrast: official WCAG 2.x ratio plus perceptual OKLab Delta-E for every color pair.
- OKLCH sliders (Lightness, Chroma, Hue) on each color with live bidirectional hex sync.
- Native color pickers and hex inputs let you import existing colors or design new ones in OKLCH.
- AA/AAA compliance grid covering normal text, large text, and graphical objects (WCAG 2.1/2.2).
- Swap, randomize, copy-ratio, and a live preview of real buttons and body text in context.