Value Contrast
Value contrast — the difference in lightness between elements — is the foundation of legibility and the most powerful tool for creating visual emphasis without introducing colour.
Strip a well-designed interface of its colour and convert it to greyscale. If the hierarchy collapses — if you can no longer tell what’s primary, what’s secondary, what’s interactive — the design has a value problem. The best interfaces work in greyscale first, because value contrast does structural work that no amount of colour complexity can replace. Colour adds nuance on top of a foundation of lightness and darkness.
What value contrast is
Value refers to the lightness or darkness of a colour, independent of its hue. High value contrast is the large difference in lightness between two adjacent elements — dark text on a light background, a white button on a dark surface. Low value contrast is when two adjacent elements are close in lightness — medium grey text on a light grey background.
Value contrast drives legibility. The eye distinguishes objects by detecting differences in lightness more quickly and accurately than differences in hue. This is partly why black ink on white paper remains the most readable text combination ever designed, and why even today — with the full spectrum of digital colour available — most body text on most screens is dark-on-light or light-on-dark, not coloured-on-coloured.
High contrast and low contrast
High contrast creates sharp, clear boundaries between elements — it reads as energetic, direct, and immediately legible. Low contrast creates soft, subtle transitions — it reads as refined, quiet, and secondary. The choice between them is a hierarchy decision, not just an aesthetic one.
Primary content should have high value contrast with its background. Body text should be close to black on a white or near-white background. Secondary content — captions, metadata, placeholder text — can have lower contrast, which visually recedes without disappearing. Interactive elements need enough contrast to be clearly identifiable as clickable. The moment you reduce contrast to the point of ambiguity, you’ve subtracted information from the design.
Value contrast independent of hue
One of the most important things to understand about value contrast is that it operates independently of colour. A vivid orange and a vivid blue may appear completely different in hue, but if they share similar lightness values, they will produce almost no contrast when placed together — and will read as nearly indistinguishable in greyscale.
This is a common trap: designers choose colours that “look different” because they’re different hues, without checking whether they’re different in value. Run your design through a greyscale filter (Figma’s accessibility overlay, a browser extension, or simply desaturating a screenshot) to reveal the actual value relationships. If two elements that need to be visually distinct collapse into the same grey tone, you need to adjust one of their lightness values.
The hierarchy value creates
In the same way that typographic hierarchy uses size and weight to establish reading order, value contrast creates a visual hierarchy that tells the eye where to look and in what order. The highest-contrast element claims the most attention. The next highest gets the next look. Elements with low contrast recede into the background.
This is why a dark, high-contrast headline naturally draws the eye before lighter body text. It’s why a filled button (dark background, white text) stands out more than a ghost button (transparent background, dark text) even when they’re the same size. Value contrast is attention — manage it deliberately, and visual hierarchy follows.