Contrast Checker
Test any pair against WCAG 2.2 and APCA, 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.
Placeholders, disabled text and icons only
Suggested fixes for 4.5:1
This pair already passes 4.5:1 — nothing to fix.
/* Accessible pairing — 4.73:1 */
.button {
background: oklch(0.193 0.017 273.8);
color: oklch(0.605 0.03 271.6);
/* Let the browser choose automatically (Baseline 2026) */
color: contrast-color(oklch(0.193 0.017 273.8));
}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 2026?
- 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, the candidate method for WCAG 3, is more perceptual but not yet a legal requirement, so this tool shows both: WCAG ratios for compliance and an APCA Lc score for how readable the pair really is.
- What is an APCA Lc score?
- APCA reports lightness contrast (Lc) from 0 to about 106. Positive values mean dark text on a light background, negative values light text on a dark one. Lc 75 is the minimum for body text, Lc 60 for larger content text, Lc 45 for headlines and Lc 30 for placeholders and icons.
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.