Accessibility & Comparison
Compare Colors Side by Side
Add two to six colors to see their HEX, RGB and HSL values, luminance, contrast against white and black, and how far apart each pair really is.
Your colors stay in your browser. The shareable link stores the colors after the # sign, which is never sent to a server.
How to read the results
Contrast ratio compares the brightness of two colors on a scale from 1:1 (identical) to 21:1 (black on white). Text needs at least 4.5:1 at normal size and 3:1 when large. Color difference (ΔE) is the CIE76 distance between two colors in the Lab color space: below 2 is hard to tell apart, 2 to 10 is noticeable at a glance, and above 50 is a very different color. Hue difference is the angle between two colors on the color wheel, from 0° to 180°.
A pair can have a large ΔE and still fail contrast (red and green of equal brightness, for example), so use both numbers. For the full WCAG breakdown use the contrast checker.
Questions about comparing colors
How many colors can I compare?
Between two and six. Each pair is compared for contrast ratio, color difference and hue difference.
What does a color difference (Delta E) number mean?
It measures how far apart two colors are in the Lab color space. Under 2 is almost identical, 2 to 10 is noticeable at a glance, 10 to 50 is clearly different and above 50 is a very different color. This page uses the CIE76 formula.
Can I share a comparison?
Yes. Use Copy shareable link. The colors are stored in the part of the address after the # sign, so they stay in the browser and are never sent to a server.