Using colour to present information should be a simpler aspect of design. However, start catering for how different people perceive colour, and suddenly things get very messy indeed. Learn how, when it comes to colour contrast, the Web Content Accessibility Guidelines (WCAG) surprisingly creates as many problems as it solves. Learn what's coming in WCAG 3 and take away an awareness of being biased by our tools (not always in the right direction), and some new tools to try instead. Participant Takeaways: Gain a raised awareness that what we do is often defined by our tools, and how being aware of the issues around the tools and the guidance can help us design better Prepare for changes relating to colour and contrast in WCAG 3 and identify some steps you can take now - as well as those that you definitely shouldn't. Themes: A11y, Accessibility, Colour, Contrast, Design, Human Perception, Standards, UX, Visualisation, WCAG

1. 0
Roger Attrill, UX Specialist
Linguamatics, an IQVIA company
@think_ui
UX Scotland 07-09 June 2023
Colour, Contrast, and Accessibility:
Not as black and white as it seems!

2. 1
A bit about me ( the boring bit )

3. 2

4. 3

5. 4

6. 5
Sorry!

7. 6
P
E
R
C
E
P
TI
O
N
O
F
C
O
L
O
U
R

8. 7

9. 8

10. 9

11. 10

12. 11

13. 12
Eliel Saarinen
Photo credit: Photography by James Haefner, 2016; Courtesy Cranbrook Center for Collections and Research
“Always design a thing by considering
it in its next larger context –
a chair in a room,
a room in a house,
a house in an environment,
an environment in a city plan.”

14. 13
Colo(u)r

15. 14
Attract attention
Group or differentiate elements
Attach meaning
Enhance aesthetics
Why use colour in the first place?

16. 15
What could go wrong?
Too many colours - busy & too much to process
Clashing colours - looks harsh and poorly planned
Saturated colours - exciting, dynamic, tiring
Symbolism - inappropriate cultural meaning
Not everyone can (equally) distinguish all colours

17. 16
Cultural meanings?
Tokyo Stock Exchange by Dick Thomas Johnson (CC BY 2.0 - https://www.flickr.com/photos/31029865@N06/6646813851 )

18. 17
Solvable problems, except for one
Too many colours - busy & too much to process
Clashing colours - looks harsh and poorly planned
Saturated colours - exciting, dynamic, tiring
Symbolism - inappropriate cultural meaning
Not everyone can (equally) distinguish all colours

19. 18
Catering for everyone – the flaw of averages
https://www.thestar.com/news/insight/2016/01/16/when-us-air-force-discovered-the-flaw-of-averages.html

20. 19
The guidelines (WCAG)

21. 20
What does WCAG tell us to do?
Colour should not be the sole method of conveying or
distinguishing content
Text has a contrast ratio of at least 4.5:1 (AA)
Large text has a contrast ratio of at least 3:1 (AA)
https://www.w3.org/TR/WCAG21/
A
AA
AAA

22. 21
What does WCAG tell us to do?
Colour should not be the sole method of conveying or
distinguishing content
Text has a contrast ratio of at least 4.5:1 (AA)
Large text has a contrast ratio of at least 3:1 (AA)
https://www.w3.org/TR/WCAG21/

23. 22
What does WCAG tell us to do?
Colour should not be the sole method of conveying or
distinguishing content
Text has a contrast ratio of at least 4.5:1 (AA)
Large text has a contrast ratio of at least 3:1 (AA)
https://www.w3.org/TR/WCAG21/

24. 23
What does WCAG tell us to do?
Colour should not be the sole method of conveying or
distinguishing content
Text has a contrast ratio of at least 4.5:1 (AA)
Large text has a contrast ratio of at least 3:1 (AA)
https://www.w3.org/TR/WCAG21/

25. 24
What does WCAG tell us to do?
Colour should not be the sole method of conveying or
distinguishing content
Text has a contrast ratio of at least 4.5:1 (AA)
Large text has a contrast ratio of at least 3:1 (AA)
https://www.w3.org/TR/WCAG21/

26. 25
Grey text
1 #808080 = 3.94 : 1

27. 26
Grey text
1 #808080 = 3.94 : 1

28. 27
Grey text
1 #808080 = 3.94 : 1
2 #767676 = 4.54 : 1

29. 28
Grey text
1 #808080 = 3.94 : 1
2 #767676 = 4.54 : 1
3 #626262 = 6.09 : 1

30. 29
Grey text
1 #808080 = 3.94 : 1
2 #767676 = 4.54 : 1
3 #626262 = 6.09 : 1
4 #595959 = 7.00 : 1
#202020 = 16.29 : 1

31. 30
Twitter blue

32. 31
What is going on?
#FFFFFF = 3.0 : 1
#1D9BF0

33. 32
What is going on?
#FFFFFF = 3.0 : 1
#000000 = 6.99 : 1
#1D9BF0

34. 33
The WCAG 2 contrast algorithm is not fit for purpose
Simplistic
Out of date

35. 34
Orange and blue
WHITE 3.03 : 1
BLACK 6.93 : 1
WHITE 3.80 : 1
BLACK 5.53 : 1
✓
✘
✓
✘
WCAG 2 contrast ratios
#FF6000
#0080FF

36. 35
Introducing APCA for WCAG 3
Advanced
Perceptual
Contrast
Algorithm

37. 36
APCA for WCAG 3
TOOL: https://www.myndex.com/APCA/
DOC: https://github.com/Myndex/SAPC-APCA
CODE: https://github.com/Myndex/apca-w3/

38. 37
WCAG 2 vs APCA

39. 38
WCAG 2 contrast ratios
WCAG 2
#000000
#101010
#202020
#303030
#FFFFFF
…
#F0F0F0

40. 39
WCAG 2

41. 40
WCAG 2

42. 41
WCAG 2

43. 42
WCAG 2

44. 43
WCAG 2

45. 44
WCAG 2

46. 45
APCA contrast ratios
Range:
Lc = 0 to 106 (dark on light)
Lc = 0 to -108 (light on dark)
Negative value = negative contrast (‘dark mode’)
Fluent non-body text
e.g. headlines, captions, nav, menus, tips, forms, fields
4.5 : 1 (AA) ~= Lc 60
7 : 1 (AAA) ~= Lc 75
APCA

47. 46
APCA contrast ratios
Range:
Lc = 0 to 106 (dark on light)
Lc = 0 to -108 (light on dark)
Negative value = negative contrast (‘dark mode’)
Fluent non-body text
e.g. headlines, captions, nav, menus, tips, forms, fields
4.5 : 1 (AA) ~= Lc 60
7 : 1 (AAA) ~= Lc 75
Body text
e.g. 2+ lines of continuous text, block, column
4.5 : 1 (AA) ~= Lc 75
7 : 1 (AAA) ~= Lc 90
APCA

48. 47
APCA contrast ratios
APCA

49. 48
APCA

50. 49
APCA

51. 50
WCAG2 vs APCA contrast ratios
( white foreground )
WCAG 2
APCA

52. 51
APCA

53. 52
WCAG2 vs APCA contrast ratios
( black foreground )
WCAG 2
APCA

54. 53
APCA

55. 54
TMI?

56. 55
Orange and blue
WHITE 3.03 : 1
BLACK 6.93 : 1
WHITE 3.80 : 1
BLACK 5.53 : 1
✓
✘
✓
✘
WCAG 2 contrast ratios
#FF6000
#0080FF
61.3 : 1
48.1 : 1
70.1 : 1
39.4 : 1
✘
✓
✘
✓
APCA contrast ratios

57. 56
WCAG 2 vs APCA: Twitter blue
WHITE
BLACK
3.0 : 1
6.99 : 1
WCAG 2 CR
#1D9BF0
61.45
47.94
APCA Lc
✓
✘ ✓
✘

58. 57
WCAG 2 vs APCA: #808080 mid grey text
#808080 3.94 : 1
WCAG 2 CR
66.9
APCA Lc
✘ ✓
#808080 5.32 : 1 34.8 ✘
✓

59. 58
The bigger picture
WCAG 2
WCAG 2

60. 59
The bigger picture
WCAG 2 APCA

61. 60
We should use APCA then?

62. 61
We should use APCA then?
Whooaa! Not so fast...

63. 62
We should use APCA then?
Whooaa! Not so fast...
version 2 of the guidelines are still here
laws are still here
VPATs (Voluntary Product Accessibility Templates) are still here
company design requirements and policies are still here
…all referencing version 2.1 of the guidelines

64. 63
We could use both WCAG and APCA then?
APCA
WCAG 2
APCA
WCAG 2
Safe

65. 64
We could use both WCAG and APCA then?
APCA
WCAG 2
APCA
WCAG 2
Safe
Safe Non-body text
Body text

66. 65
We could use both WCAG and APCA then?
APCA
WCAG 2
APCA
WCAG 2
Safe
Safe
Non-body text
Body text

67. 66
We could use both WCAG and APCA then?
APCA
WCAG 2
APCA
WCAG 2
Safe
Safe
Non-body text

68. 67
We could use both WCAG and APCA then?
APCA
WCAG 2
APCA
WCAG 2
Safe
Safe
Body text

69. 68
We could use both WCAG and APCA then?
APCA
WCAG 2
APCA
WCAG 2
Safe
http://www.myndex.com/BPCA/

70. 69
We could use both WCAG and APCA then?
APCA
WCAG 2
APCA
WCAG 2
Safe
http://www.myndex.com/BPCA/

71. 70
Chrome DevTools (Settings: Experiments)

72. 71
Colourspaces

73. 72
HSL
https://codepen.io/HunorMarton/pen/dvXVvQ/

74. 73
HSL -> HSLuv
https://www.hsluv.org/
https://en.wikipedia.org/wiki/CIELUV

75. 74
Adjusting hue: HSL vs HSLuv

76. 75
Adjusting hue: HSL vs HSLuv

77. 76
Adjusting hue: HSL vs HSLuv

78. 77
Adjusting hue: HSL vs HSLuv

79. 78
Adjusting hue: HSL vs HSLuv

80. 79
Adjusting hue: HSL vs HSLuv

81. 80
Adjusting hue: HSL vs HSLuv

82. 81
Adjusting hue: HSL vs HSLuv

83. 82
Adjusting hue: HSL vs HSLuv

84. 83
In HSLuv, Lightness = Contrast

85. 84
Not everyone can distinguish all colours, but contrast really helps
Colour contrast is (probably) more complicated than you thought
When use WCAG guidance, don’t treat contrast limits as targets
Be wary of some backgrounds like blue or orange
Watch out for new guidance or algorithms coming in WCAG 3
Experiment with human-friendly colour spaces like HSLuv
[ I still didn’t answer the question of how we can cater for everyone… ]
Takeaways?

86. 85
Takeaways?
Not everyone can distinguish all colours, but contrast really helps
Colour contrast is (probably) more complicated than you thought
When use WCAG guidance, don’t treat contrast limits as targets
Be wary of some backgrounds like blue or orange
Watch out for new guidance or algorithms coming in WCAG 3
Experiment with human-friendly colour spaces like HSLuv
[ I still didn’t answer the question of how we can cater for everyone… ]

87. 86
Takeaways?
Not everyone can distinguish all colours, but contrast really helps
Colour contrast is (probably) more complicated than you thought
When use WCAG guidance, don’t treat contrast limits as targets
Be wary of some backgrounds like blue or orange
Watch out for new guidance or algorithms coming in WCAG 3
Experiment with human-friendly colour spaces like HSLuv
[ I still didn’t answer the question of how we can cater for everyone… ]

88. 87
Takeaways?
Not everyone can distinguish all colours, but contrast really helps
Colour contrast is (probably) more complicated than you thought
When using WCAG guidance, don’t treat contrast limits as targets
Be wary of some backgrounds like blue or orange
Watch out for new guidance or algorithms coming in WCAG 3
Experiment with human-friendly colour spaces like HSLuv
[ I still didn’t answer the question of how we can cater for everyone… ]

89. 88
Takeaways?
Not everyone can distinguish all colours, but contrast really helps
Colour contrast is (probably) more complicated than you thought
When using WCAG guidance, don’t treat contrast limits as targets
Be wary of some backgrounds like blue or orange
Watch out for new guidance or algorithms coming in WCAG 3
Experiment with human-friendly colour spaces like HSLuv
[ I still didn’t answer the question of how we can cater for everyone… ]

90. 89
Takeaways?
Not everyone can distinguish all colours, but contrast really helps
Colour contrast is (probably) more complicated than you thought
When using WCAG guidance, don’t treat contrast limits as targets
Be wary of some backgrounds like blue or orange
Watch out for new guidance or algorithms coming in WCAG 3
Experiment with human-friendly colour spaces like HSLuv
[ I still didn’t answer the question of how we can cater for everyone… ]

91. 90
Takeaways?
Not everyone can distinguish all colours, but contrast really helps
Colour contrast is (probably) more complicated than you thought
When using WCAG guidance, don’t treat contrast limits as targets
Be wary of some backgrounds like blue or orange
Watch out for new guidance or algorithms coming in WCAG 3
Experiment with human-friendly colour spaces like HSLuv
[ I still didn’t answer the question of how we can cater for everyone… ]

92. 91
Takeaways?
Not everyone can distinguish all colours, but contrast really helps
Colour contrast is (probably) more complicated than you thought
When using WCAG guidance, don’t treat contrast limits as targets
Be wary of some backgrounds like blue or orange
Watch out for new guidance or algorithms coming in WCAG 3
Experiment with human-friendly colour spaces like HSLuv
[ I still didn’t answer the question of how we can cater for everyone… ]