Contrast Checker
Test any pair against WCAG 2.2, then apply the smallest OKLCH adjustment that reaches your target ratio — instead of guessing at hex codes until the badge turns green.
Large text sample
Body copy at 16px — the size most of your interface actually uses.
Small print at 12px for dense tables and captions.
Suggested fixes for 4.5:1
/* Accessible pairing — 9.71:1 */
.button {
background: oklch(1 0 0);
color: oklch(0.395 0.114 277.3);
/* Let the browser choose automatically (Baseline 2026) */
color: contrast-color(oklch(1 0 0));
}Reading the result
The ratio compares relative luminance of the two colors, from 1:1 (identical) to 21:1 (black on white). Body text needs 4.5:1, large text and UI boundaries need 3:1, and AAA raises body text to 7:1.
Fixing a failing pair without losing the brand color
Nudging lightness in OKLCH is almost always the right repair: hue and chroma stay put, so the color still reads as the same color. Reducing chroma instead is useful when a saturated color vibrates against its background. The third strategy searches for the smallest perceptual distance (ΔE) that satisfies your target, which can adjust both.
Automating contrast in CSS
With contrast-color() at baseline in 2026, foreground text on a dynamic background no longer needs a JavaScript luminance check. Keep one static declaration before it as a fallback and let the browser override it where supported.
Frequently asked questions
- What contrast ratio do I need to pass WCAG?
- WCAG 2.2 AA requires 4.5:1 for body text and 3:1 for large text (18.66px bold or 24px regular) and for UI component boundaries. AAA requires 7:1 for body text and 4.5:1 for large text.
- What is the smallest change that will make my color pass?
- Usually a lightness adjustment. This tool solves for the nearest passing color along the OKLCH lightness axis while holding hue and chroma, which keeps the color recognisably the same — that is the “preserve hue and chroma” fix below.
- What is contrast-color() and can I use it in 1970?
- contrast-color() lets the browser pick black or white text for a given background automatically. It reached baseline availability in 2026, so it is safe for progressive enhancement; keep an explicit fallback declaration before it for older engines.
- Does WCAG contrast match how I perceive color?
- Not perfectly. WCAG 2.x uses a relative-luminance formula that under-reports problems for mid-tone and saturated colors. APCA is the more perceptual successor but is not yet a normative requirement, so this tool reports WCAG ratios for compliance while generating fixes in OKLCH for perceptual quality.
Related tools
Turn one color into a 50–950 ramp, export as CSS variables, JSON or Tailwind theme.
Primary, neutral, success, warning, danger ramps plus semantic light/dark tokens.
Preview palettes as protanopia, deuteranopia, tritanopia and achromatopsia.