Dark Mode Pair Checker
Build light and dark color pairs with contrast ratios.
Overview
The Dark Mode Pair Checker takes a light-mode foreground/background combination and finds a matching dark-mode pair with comparable contrast. It reports the WCAG 2.1 ratio for both pairs side by side, so you can confirm that switching themes will not push body text out of compliance.
It is the everyday tool when authoring CSS custom-property themes that flip between :root and :root[data-theme="dark"] blocks. Designers also use it to audit existing dark-mode tokens for parity with their light counterparts, particularly the long tail of secondary text, muted captions and disabled states.
How it works
The tool inverts the lightness component of each colour using OKLCH (so the hue and chroma are preserved), then nudges the result to match the contrast ratio of the original pair as closely as possible. WCAG luminance is computed via the standard sRGB gamma decode and the 0.2126R + 0.7152G + 0.0722B weighting.
Because dark mode UIs are usually viewed in lower ambient light, perfect ratio parity is not always desirable — eye comfort often calls for slightly softer contrast in dark themes. The tool surfaces both ratios so you can decide whether to match exactly or relax the dark pair a touch.
Examples
light #1a1a1a on #ffffff → 19.3 : 1
dark #ffffff on #1a1a1a → 19.3 : 1 (mirror)
light #555555 on #ffffff → 7.46 : 1 (AAA)
dark #c8c8c8 on #1a1a1a → 9.92 : 1 (AAA)
FAQ
Should dark mode have identical contrast to light mode?
Not necessarily. APCA and recent research suggest dark themes can comfortably run at slightly lower numeric ratios because the eye's response curve differs at lower luminance.
Why is my inverted background not pure black?
Pure-black #000 backgrounds cause "halation" — bright text appears to vibrate against the surround. Common dark-mode systems use values around #0e0e0e to #1a1a1a to soften the effect.
Does the pair checker handle accent colours?
Yes. Accent colours often shift hue slightly between themes — desaturating a vivid brand colour for dark mode keeps it from glowing. The OKLCH-based inversion preserves the hue so you can tune chroma manually.
Will the dark colour be in gamut?
Inverting OKLCH lightness can push highly saturated dark colours out of sRGB. The tool clamps to the closest in-gamut value and flags when clipping occurred.