Accessibility
02 / Colour, Contrast & Font
Key question
Can it be seen?
Many people have impaired vision: due to poor eyesight, cataracts, colour blindness, fatigue, or a poor-quality screen. Around one in twelve men has red-green colour blindness. Design must therefore still work even when colours, sharpness, or lighting are not ideal.
Learning objective: You are able to measure and assess contrast, present information independently of colour, and use typography for optimal legibility.
Out of sight, out of mind.
2.1 / Contrast
Contrast is a number, not a feeling.
The contrast ratio compares the brightness of the text and the background, ranging from 1:1 (no difference) to 21:1 (black on white). At level AA, the WCAG require three values:
01
Body text
At least 4.5:1.
02
Large text
At least 3:1, from 24 px or 19 px bold.
03
Controls
Borders, icons, and focus at least 3:1.
Be careful with text on images and gradients: the contrast must be sufficient at the weakest point. A semi-transparent overlay behind the text can help.
Measure, don't guess.
2.2 / Never just colour
Colour alone conveys no information.
When red means 'incorrect' and green means 'correct', many people see no difference. That is why every colour cue needs a second indicator: a symbol, text, a pattern or a position.
Typical examples include form errors, links within body text, status indicators and chart lines. Links are also underlined, errors are explained in a sentence, and lines are labelled directly.
Colour may help, but it must not speak alone.
2.3 / Font and Zoom
Readable means: large enough, calm, adaptable.
For body text on screen, 16 px is a good starting point, with a line spacing of around 1.5 and roughly 45 to 75, at most 80 characters per line. Easily distinguishable characters such as I, l and 1 help everyone, especially people with dyslexia.
Text must be able to resize up to 200% without content being clipped. Therefore, set font sizes relatively, never display text as an image, and allow containers to expand as text grows.
Good layout survives zooming.
Exercise
A colour check for your project
Task: Check the colours and font of one of your own projects.
STEP 1
List all pairs of font and background colours that appear in the project.
STEP 2
Measure every pair in the contrast checker and flag anything that fails.
STEP 3
Look for places where colour alone conveys meaning, and add a secondary cue.
STEP 4
Enlarge to 200% and record what breaks.
Evaluation: Which change made the biggest impact, and did it make the design worse or even better?