OKLCH.xyz

OKLCH Contrast Checker

Check WCAG 2.1 and APCA contrast, then snap to the nearest accessible color.

Foreground (text)
Background

Large text sample

Normal body text sample — the quick brown fox jumps over the lazy dog.

4.76:1WCAG 2.1APCA 73 Lcexperimental
AA textpassesAA largepassesAAAfailsUI 3:1passes
Find nearest accessible colorkeeps hue & chroma, adjusts lightness
AA Large / UI
oklch(0.554 0.041 257.42)
AA
oklch(0.554 0.041 257.42)
AAA
oklch(0.464 0.041 257.42)

Correct contrast, not a shortcut

Contrast is computed from WCAG 2.1 relative luminance — never from the difference of OKLCH lightness values, which does not match the standard. APCA is shown too, clearly marked experimental.

Fix failures without losing your color

When a pair fails, the nearest-accessible suggestions hold hue and chroma steady and only move lightness, so the fixed color still belongs to your palette.

Frequently asked questions

Which contrast algorithm do you use?

WCAG 2.1 relative luminance for the primary ratio, plus APCA (Lc) shown as an experimental preview. We do not approximate contrast from OKLCH lightness alone.

What ratios do I need?

WCAG 2.x requires 4.5:1 for normal text (AA), 3:1 for large text and UI components, and 7:1 for AAA.

What is 'nearest accessible color'?

It keeps your hue and chroma and adjusts lightness to the closest value that reaches AA, AAA or the 3:1 UI threshold against your background.

Related tools