Legibility comes from value, not from hue
When people say a color combination is hard to read, the cause is nearly always a small difference in lightness between the text and its background. The hue, whether red, blue or green, matters much less. Our eyes distinguish the shapes of letters mostly through differences in luminance, meaning perceived lightness. Differences in hue alone are a weaker signal.
You can see this by placing a mid-tone red and a mid-tone green of similar lightness side by side. They look clearly different as colors, but text in one on the other tends to shimmer and tire the eye. Make one noticeably darker and the text becomes easy to read at once.
A quick test: look in grayscale
The fastest check requires no formulas. Take a screenshot of the design and convert it to grayscale, or lower the saturation of your display. If the text still stands out clearly from its background, the value difference is probably adequate. If it dissolves into a similar gray, the pairing needs work, however pleasant it looks in color.
This test also reflects the experience of people with reduced vision, people viewing a screen in bright sunlight and some people with color vision differences, who may rely heavily on lightness differences.
Measuring contrast
Accessibility guidelines express contrast as a ratio between the relative luminance of two colors. The ratio runs from 1:1, which means no difference at all, up to 21:1, which is black on white. The widely referenced web guidelines set these minimums for the standard level of conformance:
- At least 4.5:1 for normal-size body text.
- At least 3:1 for large text and for important interface components such as input borders and icons.
Stricter targets exist for a higher level of conformance. Free checkers can calculate the ratio from two color values, and many design tools include one. The topic of contrast ratios is covered more fully in the discussion of accessibility best practices, so here the key point is simply that a number is better than a guess. Colors that look fine to you on your own screen may fail for someone else.
A passing ratio is a floor, not a guarantee of comfortable reading. Typeface, weight, size and surroundings all affect legibility too.
What makes contrast fail in practice
Light text on a light background. Pale gray text on white looks elegant in a mockup and is frequently unreadable in real conditions. This is among the most common problems in modern interfaces.
Mid-tone on mid-tone. Medium blue on medium green, or orange on red, can have a very low ratio even though both colors are strongly saturated.
Text over photographs. Image brightness varies across the frame, so text that reads well in one corner may disappear in another. Common remedies include a darkening or lightening layer behind the text, a solid panel, or moving the text to a calmer part of the image.
Thin type. Light-weight, small type needs more contrast than a bold heading. A ratio that suffices for a large headline may be tiring for a thin caption.
Placeholder and disabled text. These are often set very pale on purpose, but if people need to read them, they still need adequate contrast.
Reliance on color alone. A link that differs from the surrounding text only by hue can be missed by some readers. An underline or another cue helps, which links to the guidance on color blindness.
Dark mode is not just inverted light mode
Many products now offer a dark theme. Pure white text on pure black has very high contrast, but some readers find it harsh, especially in dim rooms, and large bright areas can appear to glow around letters. Many designers soften both ends, using a very dark gray background and slightly dimmed text. Neither extreme is universally best, and testing with real readers is worthwhile. Whichever theme you design, check the ratios again rather than assuming they carry over.
Contrast also applies beyond text
Contrast helps people tell elements apart: a button from its background, a chart line from the grid, a selected item from an unselected one. In data graphics, adjacent colors should differ in lightness as well as hue so that series can be told apart, which is a theme in data visualization. Icons and thin lines are a particular concern, since small shapes lose definition quickly when contrast is low.
Contrast is also a way of building emphasis. High contrast draws the eye, and low contrast recedes. Using strong contrast only for the most important content helps establish visual hierarchy, while lowering contrast on secondary material keeps it quiet without hiding it. The point is to be intentional: reduce contrast as a deliberate choice for secondary items, never at the cost of readability for primary ones.
A practical checklist
- Pick a text color and a background with a clear value gap.
- Check the ratio with a contrast checker and aim for at least the minimums above.
- View the design in grayscale.
- Test text over images in several places, not just the best one.
- Look at it on a phone outdoors or at low brightness, if the audience will do the same.
- Revisit hover, focus, disabled and error states, which are easy to forget.
Good legibility is rarely noticed by readers. They simply read. Poor legibility is noticed immediately, and many of them will simply leave. Treating value difference as the first thing to settle, before refining hue, avoids most of the trouble.