B·All Concepts
06
B

Brightness

The luminance dimension of color.

1 min read·Community

Brightness — also called Value in Munsell's system, or Lightness in HSL — describes how light or dark a colour is, independent of its hue or saturation. It is the dimension of colour most critical to legibility, contrast, and perceived depth.

The Thought

The HSB (Hue, Saturation, Brightness) model, popularised by digital design tools, breaks colour into three axes: the colour itself (hue), how pure it is (saturation), and how much light it appears to reflect (brightness). Of the three, brightness has the most direct impact on accessibility — it is the axis that determines whether text is readable against a background.

A useful exercise is to convert a design to greyscale. What remains readable and what collapses tells you whether your colour decisions are sound. If hierarchy, contrast, and meaning survive the greyscale conversion, the design has a solid luminance foundation. Colour can then do emotional and semantic work on top of that solid base.

In dark-mode design, brightness is the primary tool for creating surface hierarchy. Where light-mode designs use light colours to create depth, dark-mode designs use slight brightness increases above a dark base. The surface-container system used in Material Design and many design tokens codifies this: each tier of the stack is one step brighter than the one beneath it.

Key Principles
  1. 01

    Brightness, not hue, is the primary driver of legibility and contrast.

  2. 02

    A greyscale check is a fast and reliable accessibility audit.

  3. 03

    In dark-mode UIs, surface hierarchy is created through brightness increments above a dark base.

  4. 04

    Never rely on brightness alone for information — it fails for users with brightness sensitivity.

  5. 05

    High brightness draws the eye; low brightness recedes — use this intentionally for hierarchy.

Related