Colour Independence

Colour Independence

Design so that every piece of information conveyed by colour is also conveyed by something else — shape, text, pattern, position, or icon. 8% of men and 0.5% of women have colour vision deficiency. That's roughly 1 in 12 of your male users.

Core Principle

Colour can enhance meaning. Colour must never be the only carrier of meaning.

Common Failures

Status Indicators

• Bad: green dot = online, red dot = offline (colour only)
• Good: green dot + "Online" label, red dot + "Offline" label
• Better: green dot with tick + "Online", grey dot with x + "Offline"

Form Validation

• Bad: red border on invalid fields (colour only)
• Good: red border + error icon + error text message
• The error message does the real work — the colour is reinforcement

Data Visualisation

• Bad: line chart with 5 coloured lines, legend uses colour swatches
• Good: different line styles (solid, dashed, dotted) + labels +

distinct colours that work in greyscale

• Good: bar chart with patterns (stripes, dots, solid) alongside colour
• Always test charts in greyscale — can you still read them?

Links

• Bad: links distinguished from body text only by colour
• Good: links are coloured AND underlined
• The underline is the accessible indicator — colour is the enhancement

Alerts and Badges

• Bad: red badge = urgent, yellow = warning, green = ok
• Good: red badge + "Urgent" label, yellow + "Warning" label,

green + "OK" label

• Icons reinforce: ⚠ for warning, ✓ for success, ✕ for error

Maps and Diagrams

• Bad: regions coloured to show data (choropleth with no labels)
• Good: colours + patterns + values displayed on each region
• Good: interactive with values on hover/focus AND a data table

alternative

Design Patterns

Double Encoding

Every colour meaning gets a second encoding:

• Colour + icon
• Colour + text label
• Colour + pattern or texture
• Colour + shape
• Colour + position

Accessible Colour Palettes

• Choose colours that are distinguishable in all types of

colour vision deficiency (not just red-green)

• Use a colour blindness simulator to test your palette
• Blue and orange are generally safe for most types
• Avoid red/green as the only pair distinguishing two states
• Ensure sufficient contrast between adjacent colours in charts

Greyscale Test

Quick check: convert your interface to greyscale.

• Can you still use it?
• Can you distinguish all status states?
• Can you read the chart?
• Can you tell which fields have errors?

If any answer is no, colour is carrying meaning alone.

Assessment Checklist

• [ ] No information is conveyed by colour alone
• [ ] Status indicators use colour + icon + text
• [ ] Form errors use colour + icon + message
• [ ] Charts are readable in greyscale
• [ ] Links are distinguishable by more than colour
• [ ] Alert levels use colour + label + icon
• [ ] Data visualisations have patterns or labels alongside colour
• [ ] Interface passes the greyscale test