Color contrast

Hue contrast is the difference in color identity — how far apart two colors sit on the color wheel. Complementary colors (opposite each other) have the highest hue contrast. Analogous colors (next to each other) have the lowest.

High hue contrast creates energy and visual tension. It grabs attention, which makes it useful for calls to action, alerts, and emphasis. But overused, it creates visual noise — competing colors that fight for attention.

Low hue contrast feels calm and unified. Analogous palettes are naturally harmonious but can lack the punch needed to direct the eye. They work well for backgrounds and supporting elements where you don't want distraction.

A special case of hue contrast is warm versus cool. Warm colors (reds, oranges, yellows) appear to advance — they feel closer to the viewer. Cool colors (blues, greens, purples) appear to recede — they feel further away. This perceptual depth means a warm accent on a cool background will naturally pop forward, which is why warm colors work well for interactive elements like buttons and links.

Value contrast is the difference in lightness between two colors. It's the most effective type of contrast for readability. Black on white is the most extreme value contrast possible, and it's the most readable combination for text.

Value contrast works even without any hue difference at all — a dark gray on a light gray is readable purely through value contrast. Conversely, two colors with very different hues but similar values (a medium blue on a medium red) can be surprisingly hard to read, because the eye relies more on value difference than hue difference for distinguishing shapes and text.

A useful test: convert your design to grayscale. If the contrast disappears, your design is relying on hue contrast alone, and it will fail for users with low vision or color blindness.

High value contrast is essential for text and key interface elements. Low value contrast is useful for subtle design treatments — differentiating background sections, creating depth, or layering elements without strong visual separation.

Saturation contrast is the difference in vividness between two colors. A fully saturated blue next to a muted blue-gray creates saturation contrast even though the hue and value may be similar.

Saturation contrast is subtler than hue or value contrast, making it useful for design elements that shouldn't compete for attention — background variations, card surfaces, hover states, or secondary information. A desaturated palette with one or two saturated accent colors is one of the most reliable design patterns, because the saturated elements naturally draw the eye without the visual noise of high hue contrast.

Against a neutral gray background, colors with varying saturation can create the appearance of transparency or depth — a useful effect for layered interfaces.

In practice, effective design rarely relies on a single type of contrast. The most readable and visually pleasing combinations use two or three contrast types together.

Consider blue and orange — a complementary pair with high hue contrast. At full saturation and similar values, this combination vibrates and can be tiring to look at. But adjust the value (make the blue darker and the orange lighter) and reduce the saturation slightly, and the same pair becomes comfortable and readable while keeping its visual energy.

Working with natural values is also important to keep in mind. Every hue has a natural value — yellow is inherently light, blue and purple are inherently dark. Combinations that respect natural values feel intuitive. A light yellow on a dark blue reads naturally. A dark yellow on a light blue feels wrong, even if the contrast ratio is technically the same, because it works against the inherent lightness of those hues.

Text is where contrast matters most. Poor contrast makes content physically difficult to read and quickly tires the reader's eyes.

Some combinations to avoid: green text on red, and red text on blue. Green-on-red is problematic for two reasons — the hues are complementary (creating visual vibration at full saturation) and the values are similar (reducing legibility). Red-on-blue creates a chromatic vibration effect where the edges of the letters seem to shimmer, making sustained reading exhausting.

High-readability combinations share one trait: strong value contrast. Black on white, dark blue on pale yellow, white on dark navy — these all work because the lightness difference is large, regardless of the hue relationship.

As a rule: choose your text and background colors based on value contrast first, then refine the hue and saturation for aesthetics. If your colors pass the grayscale test (still clearly distinct when desaturated), they'll be readable.