This was an online workshop I ran for UCEM staff members. This session is designed to provide an introduction to colour and accessibility, introducing various accessibility requirements that should be considered when using colour and introduce the colour contrast ratios required to meet the WCAG 2.1 AA standard. There will also be a demonstration on the WebAIM accessibility contrast checker which calculates contrast ratios to meet the standard. The session will end with a quiz where participants will have to use the skills they have learned in this session to answer the questions.

1. Dr Tharindu Liyanagunawardena
Accessible Colour

2. ©UCEM
What is accessibility?
Accessibility refers to the design of products, devices, services, or
environments for people with disabilities. The concept of accessible design
ensures both “direct access” (i.e. unassisted) and “indirect access” meaning
compatibility with a person’s assistive technology (for example computer
screen readers)
- Wikipedia

3. ©UCEM
Example

4. ©UCEM
Legal side
• Equality Act 2010
• Section 29(1) require that those who sell or provide services to the public must not
discriminate against any person requiring the service
• Sections 20 and 29(7) of the Act make it an ongoing duty of service providers to make
“reasonable adjustments” to accommodate people with disabilities
• The Public Sector Bodies (Websites and Mobile Applications) Accessibility
Regulations 2018
• 7(1) A public sector body must provide an accessibility statement in accordance
with the model accessibility statement, and keep that statement under regular review
• A website of a public sector body will be presumed to be in conformity with the
accessibility requirement to the extent that (a)it meets harmonised standards, the
references to which have been published in the Official Journal in accordance with
Regulation (EU) No 1025/2012(1)  WCAG 2.1 AA
Note: WCAG 2.1 guidelines were made available 5th June 2018
WCAG 2.2 guidelines working draft 11 August 2020

5. ©UCEM
What is WCAG?
• Web Content Accessibility Guidelines
• Current version WCAG 2.1
• 3 Levels of compliance  A, AA, AAA

6. ©UCEM
WCAG 2.1 Colour Guidance
• 1.4.1: Use of Color  A
• 1.4.3: Contrast (Minimum)  AA
• Text contrast ratio of at least 4.5:1
• Large text 3:1
18 point text or 14 point bold text is judged to be large enough
• 1.4.6: Contrast (Enhanced)  AAA
• Contrast ratio of at least 7:1
• Large text 4.5:1
• 1.4.11: Non-text Contrast  AA
• UI component and graphical objects to have 3:1 contrast against adjacent colours

7. ©UCEM
Begin programming: Build your first mobile game
WCAG 2.1 1.4.1: Use of Color

8. ©UCEM
Colour vision deficiency – a spectrum
• Red-Weak/Protanomaly
• Green-Weak/Deuteranomaly
• Blue-Weak/Tritanomaly
• Red-Blind/Protanopia
• Green-Blind/Deuteranopia
• Blue-Blind/Tritanopia

9. ©UCEM
Use of Colour
What is the speed limit in a residential area?
30mph 50mph 60mph 70mph

10. ©UCEM
Use of Colour cont.
What is the speed limit in a residential area?
*30mph 50mph 60mph 70mph
• Correct answer is indicated with * symbol
• Correct answer is 30mph

11. ©UCEM
WCAG 2.1 Colour Guidance cont.
• 1.4.1: Use of Color  A
• 1.4.3: Contrast (Minimum)  AA
• Text contrast ratio of at least 4.5:1
• Large text 3:1
18 point text or 14 point bold text is judged to be large enough
• 1.4.6: Contrast (Enhanced)  AAA
• Contrast ratio of at least 7:1
• Large text 4.5:1
• 1.4.11: Non-text Contrast  AA
• UI component and graphical objects to have 3:1 contrast against adjacent colours

12. ©UCEM
Representation of Colour
• Hexadecimal
• RGB
…
1.4.3: Contrast (Minimum)
1.4.6: Contrast (Enhanced)
1.4.11: Non-text Contrast

13. ©UCEM
Check for Contrast
• WebAIM Contrast Checker https://webaim.org/resources/contrastchecker/
• Accessibility insights for Windows
…

14. ©UCEM
WebAIM Contrast Checker

15. ©UCEM
WebAIM Contrast Checker #1

16. ©UCEM
WebAIM Contrast Checker #2

17. ©UCEM
WebAIM Contrast Checker #3

18. ©UCEM
WebAIM Contrast Checker #4

19. ©UCEM
WebAIM Contrast Checker #5

20. ©UCEM
Activity
• Open WebAIM Colour Contrast Checker
• https://webaim.org/resources/contrastchecker/
• Familiarise yourself with the way you can insert required colours
• Hexadecimal value representing colour
• RGB value representing colour
• Using colour picker
• Look at how ratio changes when different colours are used
• Interpret the results for the colours you have selected
• Normal text
• Large text
• Graphical objects

21. ©UCEM
Check for colour contrast
• Light blue
• Hexadecimal #46CCF5
• RGB 70, 204, 245
• White
• Hexadecimal #FFFFFF
• RGB 255, 255, 255
2020/21 (Actual)

22. ©UCEM
Check for colour contrast - Answer

23. ©UCEM
Are these accessible?

24. ©UCEM
Accessible Colour Quiz #1
• Under The Public Sector Bodies (Websites and Mobile Applications)
Accessibility Regulations 2018, what is the WCAG standard that UCEM is
required to adhere to?
• WCAG 2.0 A
• WCAG 2.0 AA
• WCAG 2.0 AAA
• WCAG 2.1 A
• WCAG 2.1 AA
• WCAG 2.1 AAA

25. ©UCEM
Accessible Colour Quiz #2
• What is the minimum colour contrast required for regular text under WCAG
2.1 AA standard?
• 7:1
• 4.5:1
• 3:1

26. ©UCEM
Accessible Colour Quiz #3
• What is the minimum colour contrast required for large text under WCAG
2.1 AA standard?
• 7:1
• 4.5:1
• 3:1

27. ©UCEM
Accessible Colour Quiz #4
Are the colours used in this table header row accessible?
The hexadecimal code for white is #FFFFFF and for light grey, it is
#A7A6A8.
Note: You may want to use Contrast Checker

28. ©UCEM
Accessible Colour Quiz #4 - Answer
Are the colours used in this table header row accessible?
The hexadecimal code for white is #FFFFFF and for light grey, it is #A7A6A8.

29. ©UCEM
Accessible Colour Quiz #5
If the hexadecimal code for white is #FFFFFF and for light green, it is
#70AE48; is this colour combination accessible?
Note: You may want to use Contrast Checker

30. ©UCEM
Accessible Colour Quiz #5 - Answer
If the hexadecimal code for white is #FFFFFF and for light green, it is #70AE48; is this
colour combination accessible?

31. ©UCEM
Accessible Colour Quiz #6
Is this bar graph accessible? Select the most appropriate answer
• Yes, the graph is accessible because it does not distinguish information only using colour
• No, the graph is not accessible because it uses green and red
• No, the graph is not accessible because it is using patterns in the graph

32. ©UCEM
Accessible Colour Quiz #7
There is white text on a blue-green background. The hexadecimal code for white is #FFFFFF and
for blue-green shown in the picture, it is #00959F. What is correct about this colour combination?
Note: You may want to use Contrast Checker
• This colour combination is accessible for normal text under WCAG 2.1 AAA standard
• This colour combination is accessible for large text under WCAG 2.1 AA standard
• This colour combination is accessible for normal text under WCAG 2.1 AA standard
• This colour combination is not accessible for any text under WCAG 2.1 AA standard

33. ©UCEM
Accessible Colour Quiz #7- Answer
There is white text on a blue-green background. The
hexadecimal code for white is #FFFFFF and for blue-
green shown in the picture, it is #00959F. What is
correct about this colour combination?
• This colour combination is accessible for normal text
under WCAG 2.1 AAA standard
• This colour combination is accessible for large text
under WCAG 2.1 AA standard
• This colour combination is accessible for normal text
under WCAG 2.1 AA standard
• This colour combination is not accessible for any
text under WCAG 2.1 AA standard

34. ©UCEM
Accessibility Awareness Course
https://learn.ucem.ac.uk/course/view.php?id=3132

35. ©UCEM
Questions?
Feedback Padlet: https://bit.ly/32vaiTa