The eye reports differences, never values

Your visual system does not measure brightness

A patch of grey on a dark background looks light. The same patch on a white background looks dark. Nothing about the patch changed. This is not an illusion in the sense of a trick: it is how the system works. Retinal cells respond strongly to edges and differences and weakly to steady, uniform values, so what reaches your awareness is already a map of contrasts rather than a map of brightnesses.

Every practical consequence in this lesson follows from that one fact. A colour has no properties on its own. It only has a relationship to what surrounds it, and design is the business of arranging those relationships.

Contrast is measurable, and there is a free way to check it

For text legibility, the widely used figure comes from the Web Content Accessibility Guidelines: a contrast ratio of at least 4.5:1 between text and its background for normal-size text, and 3:1 for large text, large meaning about 18pt regular or 14pt bold and upward. The ratio runs from 1:1 (identical) to 21:1 (pure black on pure white).

Those numbers were derived for screens and for people with moderately reduced vision, and they are a floor rather than a target. They are worth knowing because they turn an argument about taste into a number anybody can check. Free checkers exist in every browser’s developer tools, in the Colour Contrast Analyser, and inside Inkscape and Figma via extensions.

The usual failures, all of which pass a designer’s eye on a good monitor in a dark room and fail on a phone in sunlight:

• Light grey body text on white: often around 2.5:1.
• White text on a photograph, where the ratio varies across the image and is fine over the dark half and invisible over the sky.
• Two mid-tone brand colours placed on each other because they are “the brand colours”.

Contrast is not only tonal

Tone is the strongest axis, but there are others, and mixing them is what makes work feel composed rather than merely loud:

• Scale: one large shape among small ones.
• Shape: one curve in a field of rectangles.
• Texture: a photograph against flat colour.
• Direction: one diagonal in a grid of horizontals.
• Density: a crowded block beside an open one.

A design with strong tonal contrast and nothing else tends to look like a warning sign. A design with five kinds of contrast at once looks chaotic. Two is usually right, which is the same arithmetic as the emphasis levers, for the same reason.

The test that settles it: remove the colour

Convert the work to greyscale. It takes one keystroke in GIMP (Image → Mode → Grayscale), Krita, Photopea or Photoshop, and there is a greyscale filter in browser developer tools. If the hierarchy survives, your contrast is doing real work. If everything turns into the same mid-grey soup, you built the hierarchy out of hue alone.

Hue alone is the specific trap. Red and green of identical lightness are strikingly different in colour and almost identical in tone. Around one in twelve men and one in two hundred women has some form of colour vision deficiency, most commonly in exactly that red-green axis, so a chart or a status indicator distinguished only by hue is unreadable to a meaningful share of any audience. It also disappears entirely in a one-colour photocopy, which is how a surprising number of flyers end up being reproduced.

The fix is never to avoid colour. It is to make sure colour is the second signal and tone, shape or position is the first: a red line that is also thicker, a green tick that is also a tick.

Why it fails in the room it was not designed in

You are looking at a bright, calibrated screen at arm’s length in controlled light. The viewer is looking at a cheap phone at 30% brightness in daylight, or at a print where the ink has spread slightly into uncoated paper and thin type has thickened and closed up. Every one of those conditions reduces effective contrast; none increases it.

So design with headroom. If 4.5:1 is the floor, land nearer 7:1 for anything that has to work outdoors, on cheap paper, or at a distance. The cost of extra contrast is almost always aesthetic restraint. The cost of insufficient contrast is that the piece does not function at all for part of your audience, and you never hear about it, because people who cannot read something do not send feedback; they move on.