Contrast is the difference between a design being visible and a design being merely present. It is also one of the few design properties with an agreed numerical standard, which makes it unusually testable.
Understanding Color Contrast
Black text on a white background is readable because the two colors are as far apart in brightness as they can get. That is the whole mechanism, and everything else is a variation on it.
Where it gets complicated is that people do not all perceive contrast the same way. Age changes it, as the lens of the eye yellows and transmits less light. Visual impairments change it more dramatically. A palette that reads as bright and legible to a designer in their twenties can be genuinely difficult for a reader thirty years older.
The Science Behind Color Contrast
Human vision processes color through the combination of light, hue, saturation and brightness. Contrast perception depends most heavily on the last of those, which is why brightness differences survive conditions that hue differences do not.
Color models describe these properties differently depending on what they are for. RGB mixes red, green and blue and matches how screens emit light. CMYK combines cyan, magenta, yellow and black and matches how ink absorbs it. HSL separates hue, saturation and lightness, which maps more closely to how people describe colors, and makes it the easiest of the three to reason about when you are adjusting contrast.
WCAG and Contrast Ratios
WCAG sets the contrast ratios that content has to meet to count as accessible. The ratios are calculated from the relative luminance of the two colors, so they measure the brightness difference rather than the hue difference.
Navy text on white passes comfortably. Yellow text on white usually does not, even though the two colors are obviously different, because the luminance gap is small.
Color Combinations That Stay Visible
Complementary pairings like red and green give strong hue separation. Analogous pairings like blue and green give harmony. Neither guarantees a passing contrast ratio on its own, which is the point worth remembering: harmony rules and accessibility rules are answering different questions.
Testing Your Color Choices
Contrast checkers and design software will catch the measurable failures. They will not catch a palette that technically passes but is uncomfortable to read for an hour.
User testing covers the rest. Feedback from people outside the project, especially people whose vision differs from yours, tells you things the ratio cannot.
Real-World Applications of Color Contrast
Coca-Cola and Facebook both built recognizable identities on high-contrast palettes that survive being reproduced at any size. Social platforms use contrast to direct attention toward the actions they want people to take, which works precisely because contrast operates before conscious reading does.
Contrast is where visual design and accessibility stop being separate concerns. Getting it right serves both at once.
Written by
Designer and developer
Julio Song is a professional web designer and developer who builds and maintains ColorSift, and writes most of what is published here.