OKLCH Studio
Guides: OKLCH colour and accessible contrast
These guides explain the colour model and the contrast rules behind the tools on this site. Each one uses worked examples computed with the same code as the contrast checker and the converters, so the numbers you read are the numbers the tools give you.
Contrast checker →Tailwind v4 colors →shadcn/ui themes in OKLCH →Ready-made accessible palettes →Tailwind AA data report →
What is OKLCH? Lightness, chroma and hue explained
What the L, C and H numbers mean, where OKLCH comes from, and what happens when a colour is outside your screen's gamut.
OKLCH vs HSL: an honest comparison with real numbers
Why hsl() lightness is misleading, measured on real colours, plus a fair list of what HSL still does well.
OKLCH in CSS: syntax, relative colours, color-mix and fallbacks
The oklch() syntax, relative colour syntax, color-mix(), a safe fallback pattern, and what browsers support.
WCAG 2.2 contrast vs APCA: how they differ and which to use
The WCAG contrast ratio, APCA Lc, the published Lc guidance, and a table of six pairs scored both ways.
How to fix colour contrast without changing your brand colours
A step-by-step method for repairing failing text colours by moving only OKLCH lightness, with six computed examples.
How to build an accessible colour palette (with OKLCH)
Tonal scales, which steps pass AA on light and dark, state colours, dark mode and colour blindness, with a computed Tailwind blue table.
FAQ
- Where should I start?
- If OKLCH is new to you, begin with What is OKLCH, then read OKLCH vs HSL. If you already know the colour model and need to ship accessible text, go to WCAG 2.2 vs APCA and How to fix colour contrast.
- Are the numbers in the guides hand-written?
- No. Every ratio, lightness value and hex in the tables is computed at build time by the same colour code that runs the contrast checker and converters on this site. Only the specification thresholds, such as 4.5:1 for AA normal text, are typed constants.
- Do the guides give legal advice about accessibility?
- No. They explain how the WCAG 2.x contrast rules and the APCA method work. Which standard applies to you depends on your jurisdiction and contract, and WCAG 2.2 AA is the level most laws and audits reference.
- Are the guides available in other languages?
- Not yet. The guides are English only. The tools themselves are available in several languages.