colour-independence

Name: colour-independence
Author: Owl-Listener

82stars25forks

How to install colour-independence?

owl-listener/inclusive-design-skills/colour-independence

$npx -y skills add Owl-Listener/inclusive-design-skills --skill colour-independence

Installs into the current project.

Summary

Design interfaces where colour is never the only way information is communicated. Use when designing status indicators, data visualisations, form validation, alerts, maps, or any content that uses colour to convey meaning. Triggers on: colour blind, color blind, colour alone, col

Files · 1

View on GitHub

SKILL.md

1	# Colour Independence
2
3	Design so that every piece of information conveyed by colour is also
4	conveyed by something else — shape, text, pattern, position, or icon.
5	8% of men and 0.5% of women have colour vision deficiency. That's
6	roughly 1 in 12 of your male users.
7
8	## Core Principle
9
10	Colour can enhance meaning. Colour must never be the only carrier
11	of meaning.
12
13	## Common Failures
14
15	### Status Indicators
16	- Bad: green dot = online, red dot = offline (colour only)
17	- Good: green dot + "Online" label, red dot + "Offline" label
18	- Better: green dot with tick + "Online", grey dot with x + "Offline"
19
20	### Form Validation
21	- Bad: red border on invalid fields (colour only)
22	- Good: red border + error icon + error text message
23	- The error message does the real work — the colour is reinforcement
24
25	### Data Visualisation
26	- Bad: line chart with 5 coloured lines, legend uses colour swatches
27	- Good: different line styles (solid, dashed, dotted) + labels +
28	distinct colours that work in greyscale
29	- Good: bar chart with patterns (stripes, dots, solid) alongside colour
30	- Always test charts in greyscale — can you still read them?
31
32	### Links
33	- Bad: links distinguished from body text only by colour
34	- Good: links are coloured AND underlined
35	- The underline is the accessible indicator — colour is the enhancement
36
37	### Alerts and Badges
38	- Bad: red badge = urgent, yellow = warning, green = ok
39	- Good: red badge + "Urgent" label, yellow + "Warning" label,
40	green + "OK" label
41	- Icons reinforce: ⚠ for warning, ✓ for success, ✕ for error
42
43	### Maps and Diagrams
44	- Bad: regions coloured to show data (choropleth with no labels)
45	- Good: colours + patterns + values displayed on each region
46	- Good: interactive with values on hover/focus AND a data table
47	alternative
48
49	## Design Patterns
50
51	### Double Encoding
52	Every colour meaning gets a second encoding:
53	- Colour + icon
54	- Colour + text label
55	- Colour + pattern or texture
56	- Colour + shape
57	- Colour + position
58
59	### Accessible Colour Palettes
60	- Choose colours that are distinguishable in all types of
61	colour vision deficiency (not just red-green)
62	- Use a colour blindness simulator to test your palette
63	- Blue and orange are generally safe for most types
64	- Avoid red/green as the only pair distinguishing two states
65	- Ensure sufficient contrast between adjacent colours in charts
66
67	### Greyscale Test
68	Quick check: convert your interface to greyscale.
69	- Can you still use it?
70	- Can you distinguish all status states?
71	- Can you read the chart?
72	- Can you tell which fields have errors?
73
74	If any answer is no, colour is carrying meaning alone.
75
76	## Assessment Checklist
77
78	- [ ] No information is conveyed by colour alone
79	- [ ] Status indicators use colour + icon + text
80	- [ ] Form errors use colour + icon + message
81	- [ ] Charts are readable in greyscale
82	- [ ] Links are distinguishable by more than colour
83	- [ ] Alert levels use colour + label + icon
84	- [ ] Data visualisations have patterns or labels alongside colour
85	- [ ] Interface passes the greyscale test

People who liked this also viewed

6 picks

Type

colour-independence

82stars25forks

View on GitHub

How to install colour-independence?

owl-listener/inclusive-design-skills/colour-independence

$npx -y skills add Owl-Listener/inclusive-design-skills --skill colour-independence

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Colour Independence
2
3	Design so that every piece of information conveyed by colour is also
4	conveyed by something else — shape, text, pattern, position, or icon.
5	8% of men and 0.5% of women have colour vision deficiency. That's
6	roughly 1 in 12 of your male users.
7
8	## Core Principle
9
10	Colour can enhance meaning. Colour must never be the only carrier
11	of meaning.
12
13	## Common Failures
14
15	### Status Indicators
16	- Bad: green dot = online, red dot = offline (colour only)
17	- Good: green dot + "Online" label, red dot + "Offline" label
18	- Better: green dot with tick + "Online", grey dot with x + "Offline"
19
20	### Form Validation
21	- Bad: red border on invalid fields (colour only)
22	- Good: red border + error icon + error text message
23	- The error message does the real work — the colour is reinforcement
24
25	### Data Visualisation
26	- Bad: line chart with 5 coloured lines, legend uses colour swatches
27	- Good: different line styles (solid, dashed, dotted) + labels +
28	distinct colours that work in greyscale
29	- Good: bar chart with patterns (stripes, dots, solid) alongside colour
30	- Always test charts in greyscale — can you still read them?
31
32	### Links
33	- Bad: links distinguished from body text only by colour
34	- Good: links are coloured AND underlined
35	- The underline is the accessible indicator — colour is the enhancement
36
37	### Alerts and Badges
38	- Bad: red badge = urgent, yellow = warning, green = ok
39	- Good: red badge + "Urgent" label, yellow + "Warning" label,
40	green + "OK" label
41	- Icons reinforce: ⚠ for warning, ✓ for success, ✕ for error
42
43	### Maps and Diagrams
44	- Bad: regions coloured to show data (choropleth with no labels)
45	- Good: colours + patterns + values displayed on each region
46	- Good: interactive with values on hover/focus AND a data table
47	alternative
48
49	## Design Patterns
50
51	### Double Encoding
52	Every colour meaning gets a second encoding:
53	- Colour + icon
54	- Colour + text label
55	- Colour + pattern or texture
56	- Colour + shape
57	- Colour + position
58
59	### Accessible Colour Palettes
60	- Choose colours that are distinguishable in all types of
61	colour vision deficiency (not just red-green)
62	- Use a colour blindness simulator to test your palette
63	- Blue and orange are generally safe for most types
64	- Avoid red/green as the only pair distinguishing two states
65	- Ensure sufficient contrast between adjacent colours in charts
66
67	### Greyscale Test
68	Quick check: convert your interface to greyscale.
69	- Can you still use it?
70	- Can you distinguish all status states?
71	- Can you read the chart?
72	- Can you tell which fields have errors?
73
74	If any answer is no, colour is carrying meaning alone.
75
76	## Assessment Checklist
77
78	- [ ] No information is conveyed by colour alone
79	- [ ] Status indicators use colour + icon + text
80	- [ ] Form errors use colour + icon + message
81	- [ ] Charts are readable in greyscale
82	- [ ] Links are distinguishable by more than colour
83	- [ ] Alert levels use colour + label + icon
84	- [ ] Data visualisations have patterns or labels alongside colour
85	- [ ] Interface passes the greyscale test

People who liked this also viewed

6 picks

Type