Colour Contrast & Legibility

Ask a designer to fix an unreadable sign and the first instinct is usually to change the colours - a punchier blue, a warmer text. Usually that is the wrong lever. What makes text and edges readable is contrast, and the contrast that matters most is a difference in _value_ - lightness - not a difference in hue. Two colours can be wildly different in hue and still be nearly unreadable together if they share the same value: red text on a green of the same darkness famously shimmers and disappears, because the eye has almost no value edge to lock onto.

This follows directly from how we see. The eye's machinery for reading brightness is sharp and fast, while its hue discrimination is comparatively coarse. So the crisp reading of a letterform, a step edge, a handrail against a wall, is done mostly by the luminance channel. Hue adds meaning and pleasure; value does the structural work of legibility.

There is a quick, free test that every designer should build into their hands: squint, or convert the design to greyscale. Strip the hue away and look only at the value pattern. If the text still stands out clearly in grey, it will be readable for almost everyone. If it melts into its background in grey, no amount of hue difference will save it - it is failing the people who most need help, including anyone with low vision, anyone reading in glare or dim light, and anyone with colour-vision deficiency (Lesson 8.2). Your phone camera with a black-and-white filter does this test in two seconds, on a mock-up, a sign, a drawing or a screen.

> Legibility is a value problem first. If it survives greyscale, it survives almost everything.

Hold on to the distinction: a colour scheme can be harmonious and still be illegible, because harmony often lives in the hue relationships while legibility lives in the value gap. The two goals are different and sometimes pull against each other - a tasteful tone-on-tone palette is exactly the one that fails a contrast check. Knowing which problem you are solving is half the craft.

To move from 'looks readable' to 'is readable, verifiably', the web accessibility world gave everyone a number, and it is worth borrowing far beyond the screen. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio between two colours, running from 1:1 (identical, invisible) to 21:1 (pure black on pure white). It is built on relative luminance - a weighted measure of how much light a colour sends to the eye.

The weighting is the interesting part, and it confirms the last section. Relative luminance is roughly 0.2126 x red + 0.7152 x green + 0.0722 x blue (after each channel is linearised). Green counts for nearly three-quarters of perceived brightness, red for about a fifth, and blue for almost nothing. That is why bright yellow (lots of red and green) reads as very light and pure blue reads as very dark, even at full saturation - and why yellow text on white or blue text on black are such common contrast disasters. The contrast ratio itself is (Llighter + 0.05) / (Ldarker + 0.05).

The thresholds are easy to remember and translate surprisingly well to signage and interiors:

WCAG AA (the common target):
  normal text ............ 4.5:1 minimum
  large text (>=24px, or
    >=19px bold) ......... 3:1 minimum
  UI parts, icons,
    graph lines, edges ... 3:1 minimum
WCAG AAA (stricter):
  normal text ............ 7:1
  large text ............. 4.5:1

You do not need to compute this by hand - dozens of free contrast checkers take two hex values and return the ratio and a pass or fail. What matters is the habit: treat a contrast ratio as a spec, not an opinion. When you hand a signage or graphics package to a fabricator, put the target ratio in the notes the way you would put a dimension. When a client asks for pale grey text on white 'because it looks calm', you can answer with a number rather than a shrug - 'that is 2.1:1, it fails the readable minimum; here is a grey that keeps the calm and reaches 4.5:1'.

One honest caveat: the WCAG maths was tuned for self-lit screens, and researchers are actively refining it (the newer APCA model, for instance). For paint and print, which are reflective and lit by the room, treat the ratios as an excellent guide rather than a law of physics - but a guide far better than guessing.

On screens we have hex values; in buildings we have surfaces, and the parallel tool is Light Reflectance Value (LRV) - a single number from 0 (a perfect black) to 100 (a perfect white) describing how much visible light a colour reflects. Every serious paint fan deck and many material datasheets now print the LRV of each colour, and it is the interior and architectural equivalent of a value reading. Two materials with a large LRV gap read as a clear edge; two with a close LRV blur into each other however different their hues.

This matters far beyond signs. Think of the everyday edges a building asks people to find: a door in a wall, a handrail against its background, the nosing of a stair, a light switch on a plaster wall, a grab bar in a bathroom, the leading edge of a glass door. For a person with low vision - and for everyone in poor light - these edges need a value difference to be seen at all. Accessibility guidance in several countries (the UK's BS 8300 and Approved Document M are widely referenced) recommends a difference of around 30 LRV points between critical adjacent surfaces: door against wall, floor against wall, sanitaryware against floor. That is a concrete, checkable target you can bring to a finishes schedule.

A quick built-environment contrast check:
  door leaf vs wall .......... aim ~30 LRV points apart
  floor vs wall .............. aim ~30 LRV points apart
  handrail vs wall ........... make it clearly visible
  stair nosing vs tread ...... strong value contrast
  switch/socket plate vs wall  visible, not tone-on-tone

There is a subtlety worth respecting: more contrast is not always kinder. Very high floor-to-floor contrast - a dark mat let into a light floor, or bold stripes - can read to some people with dementia or visual-processing differences as a step or a hole, causing hesitation or falls. So the rule is: strong contrast on the things people must find and use (doors, rails, controls, signs), and gentler, deliberate contrast underfoot. Contrast is a tool with a direction, not a dial you simply turn up.

The designer's move is to fold LRV into the palette from the start. When you choose your neutrals and your accents, note their LRV, and make sure the surfaces that carry safety and orientation duties - not just the pretty ones - have the value gaps they need.

Contrast is necessary but not sufficient; legibility is contrast plus size, distance, glare and the age of the eye reading it. A sign that passes 4.5:1 in your hand can still be useless if the letters are too small for the distance, mounted in glare, or set in a fussy typeface.

Start with size and distance. A rough, widely used rule of thumb for signage is about 25 mm of cap height for every 6 to 8 metres of reading distance (roughly one inch per 25 feet) - a corridor sign read at 6 m wants letters near 25 mm; an overhead sign read across a concourse wants far larger. Larger letters also earn a gentler contrast threshold (the 3:1 'large text' line), which is why big wayfinding can use colour more freely than fine print can.

Next, glare and finish. Contrast is destroyed by reflection: a glossy sign under a downlight bounces the lamp straight into the reader's eye and washes the letters out, and a glass-covered directory becomes a mirror. Prefer matt or low-sheen finishes for anything that must be read, and think about where the light and the reader will actually stand - the same lesson as approving paint under real light (Lesson 3.4), applied to legibility. Backlighting can help at night but can also halo and reduce contrast if overdone.

Then, the ageing eye, because you are almost never designing only for yourself. By around 60, the eye lets in far less light than at 20, the lens yellows (dulling colour, especially blues), and contrast sensitivity drops. Design that is comfortable for a young designer on a bright monitor can be a genuine barrier for an older client or user. The safe response is generous: bigger type, higher contrast, matt finishes, and never relying on subtle tonal differences to carry meaning.

Finally, typeface and case. Contrast lives at the letter's edge, so a clean, open typeface with generous counters reads better at low contrast and distance than a thin or decorative one; long strings set in ALL CAPS lose the word-shape that helps reading and are best kept to short labels. None of this is about dumbing design down. The most elegant signage and the most refined interiors are usually the ones where legibility was designed in from the first sketch rather than argued back in at the end.