What does the color compatibility checker base its harmony verdict on?

It measures the absolute hue distance in HSL between the two colors and classifies it into the standard harmony bands (monochromatic, analogous, complementary, etc.).

Why include WCAG contrast as well as hue distance?

Two colors can be harmonious and still be illegible together — pale yellow on white is analogous but unreadable. The contrast check catches that.

Is the contrast formula the same as the standalone Contrast Checker?

Yes — both use WCAG relative luminance and the (L₁+0.05)/(L₂+0.05) ratio. This tool just packages the verdict alongside the hue analysis.

What is a good ratio for body text?

WCAG AA requires 4.5:1 for normal body text. AAA requires 7:1. The tool labels anything below 3:1 as Poor for body text.

Does the harmony classification consider saturation and lightness?

No — it focuses on hue distance only, which is what the classical color-wheel relationships are defined around. Saturation and lightness affect mood, not category.

Color Compatibility Checker

Check whether two colors are visually harmonious and accessibly contrasting in one verdict.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

How to use this color compatibility checker

Pick two colors (A and B) with the color pickers or paste hex values.
See the side-by-side swatch preview update live above the inputs.
Press Check compatibility to compute hue distance plus WCAG contrast.
Read the harmony verdict (analogous, complementary, etc.) and the contrast verdict (Excellent, Good, Fair, Poor).
Copy the result to share or paste into a design review.

About this color compatibility checker

The color compatibility checker answers two questions about a pair of colors at once: do they harmonise visually, and do they have enough contrast to be accessible together? It converts both colors to HSL to measure hue distance on the wheel (0–180°), then classifies the gap into bands: 0–15° is monochromatic, 15–45° is analogous, 45–75° is near-analogous, 75–105° is a tetradic neighbour, 105–135° is triadic-like, 135–165° is split-complementary, and over 165° is complementary. Separately it computes WCAG relative luminance for each color and the (L₁+0.05)/(L₂+0.05) contrast ratio, labelling the result Excellent (≥7), Good (≥4.5), Fair (≥3), or Poor (<3).

Worked example: #1f2937 against #fbbf24 gives a hue distance of about 60° (near-analogous warm pair) and a contrast ratio of roughly 9.8:1, which is labelled "Excellent — passes WCAG AAA for normal text." That tells you the pairing is harmonious and accessible — a strong dark-slate-on-amber combination for buttons or callouts.

Everything runs in your browser.

FAQ

What does the color compatibility checker base its harmony verdict on?: It measures the absolute hue distance in HSL between the two colors and classifies it into the standard harmony bands (monochromatic, analogous, complementary, etc.).
Why include WCAG contrast as well as hue distance?: Two colors can be harmonious and still be illegible together — pale yellow on white is analogous but unreadable. The contrast check catches that.
Is the contrast formula the same as the standalone Contrast Checker?: Yes — both use WCAG relative luminance and the (L₁+0.05)/(L₂+0.05) ratio. This tool just packages the verdict alongside the hue analysis.
What is a good ratio for body text?: WCAG AA requires 4.5:1 for normal body text. AAA requires 7:1. The tool labels anything below 3:1 as Poor for body text.
Does the harmony classification consider saturation and lightness?: No — it focuses on hue distance only, which is what the classical color-wheel relationships are defined around. Saturation and lightness affect mood, not category.