Can people read it?
The big number on the left compares how light your text is with how light the background is. 1 : 1 means they're the same, so the text is invisible. 21 : 1 is black on white.
The rules most websites follow (WCAG) ask for at least 4.5 : 1 for normal text (that's AA) and 3 : 1 for big headings, icons and buttons. AAA is 7 : 1, for text that should be easy for everyone, including people with weaker eyesight.
Your text color, from dark to light, on your background (✓ = passes AA)
A newer way to measure
APCA is a newer method that matches what people see more closely. It knows that light text on a dark background looks different from dark text on a light one, and it cares about how big and how bold your text is.
Its score (Lc) runs up to about 106. Aim for 75 or more for body text and 60 for other text. A minus sign just means light text on a dark background. It isn't an official rule yet, so check both numbers.
Fix text lightness
If your colors don't pass, this button finds the smallest change that does. It only makes your text lighter or darker: the hue and the strength of the color stay, so your blue stays your blue.
The background never changes. Want to adjust that instead? Press Swap (or X), fix, and swap back.
How different do they look?
ΔE (say "delta E") puts a number on how different two colors look. Below 1, nobody can tell them apart. Around 2, you can just see it side by side. Above 10, they're clearly two different colors.
Your text color next to colors that differ by ΔE 1, 2, 5, 10 and 20
There are four versions because the formula has been improved over the years. Use ΔE00 if you're unsure: it's the one print shops and paint makers use today.
Changing the colors
Type any color into the boxes: a hex code, rgb(), or a name like "coral" or "sunflower". The three sliders under each box change Lightness, Chroma (how strong the color is) and Hue, in a way that matches what your eye sees.
The colors are your site-wide foreground and background, so whatever you pick here follows you to the other tools.
Tip: click any example to use it as your text color.