Color Combination Checker

What the check calculates

Enter two colors and the tool tells you whether they work together, along with the numbers behind the verdict: the hue difference in degrees around the color wheel, the ΔE2000 perceptual difference, the WCAG 2.1 contrast ratio, and the lightness difference L*. Wheel schemes are calculated with a 15° tolerance: monochromatic pairs, analogous, 90° tetrad, 120° triad, 150° split, and 180° complementary.

Any notation works: #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%), tomato. A color with a broken channel such as rgb(300, 0, 0) is rejected, because the browser would silently clamp it.

Neutral colors and why it matters

Gray, white, and black have no hue, so there is nothing to argue about on the wheel: a neutral works with any color, and that is what the check reports. Services that rely on a fixed lookup table get this wrong and, for example, declare white incompatible with a pastel blue.

Color roles

For a background and text, contrast is what matters: WCAG 2.1 asks for 4.5:1 for normal text, 3:1 for large text, and 7:1 for the AAA level. For two accents side by side, other numbers matter more: whether the pair fits a wheel scheme and whether the two colors are distinguishable at all. The role switch changes the verdict to match your task.

What to do when a pair fails

The check does more than name the problem: it offers a ready color. Shift the hue to the nearest scheme, separate the colors by lightness, or adjust lightness until the contrast reaches 4.5:1 while keeping the same hue. The "Apply" button puts the suggested color into the second field.