ݺߣ

ݺߣShare a Scribd company logo

How to ensure accessible use of color in learning resources and materials aligned to your institution’s brand

•Download as PPTX, PDF•
•
Matthew Deeprose
Matthew Deeprose

Is it possible to be both on brand and accessible? WCAG guides us on making our color choices accessible. We will demonstrate a simple and repeatable solution to share with your colleagues. Our innovative matrix concept will help YOU to determine accessible color combinations within your institutional brand palette. Many students, such as those who are color blind, may not self-identify as having a disability. Poor use of color in online courses can have a detrimental impact on certain groups of students, including those who are color blind or have a visual impairment. Likewise, most people find vibrating color combinations difficult to read. Appropriate use of color (especially when used to distinguish and organize your content) can benefit everyone and reduce the 'burden' of ‘reasonable adjustments’. However, we design our learning materials, we should ensure that when we use color we do so accessibly. A constraint that many practitioners must work within is their education institution’s brand color palette, which may not have been chosen with accessibility in mind. We will share a simple and easy to use approach that can help you use colors accessibly while remaining congruent and consistent with your institution's color scheme.

1 of 34
Download to read offline
How to ensure accessible use of color in learning resources and materials aligned to your institution’s brand Tamsyn Smith & Matthew Deeprose, University of Southampton 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 1
Agenda • Why accessible use of color is vital and the guidelines we should follow. • Sharing our simple approach to check that colors are both accessible and aligned to an institution's color palette. • Invite you to benefit from this approach. 09/11/2021 2 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Ensuring equitable access to our learning environment has never been more important. 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 3
Color Contrast • 86% of web pages have low contrast text.* • 44% of files uploaded to the Learning Management System have at least one contrast issue. ** “I tend to skip over text that has low contrast because it’s too much of a strain to read it.” *** * WebAim ** Blackboard *** Joe Banks, Tech Lead at 23andMe 09/11/2021 4 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Examples of poor contrast 09/11/2021 5 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html Above examples have insufficient contrast
Black text on light backgrounds Your Feedback Assignment deadline Semester 2 timetable Exam information 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 6 Above examples have sufficient contrast
Visual impairments 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 7 300 million people have color blindness.* Many more report having difficulties with their sight.** The ability to see color decreases as we age.*** * https://abilitynet.org.uk/blog/visual-impairment-and-computing- common-questions ** http://www.colorblindawareness.org/color-blindness/ *** https://en.wikipedia.org/wiki/Color_blindness Diagram from: https://24ways.org/2012/color-accessibility/
Situational visual impairments Using a mobile in outdoors Steve Mason/Photodisc/Getty Images A projector screen in a well-lit room pxfuel.com - Creative Commons Zero - CC0 Screen glare Luke Domy / CC BY-NC-ND 2.0 Working in a poorly lit room. Getty Images 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 8
Screen glare on the examples we showed earlier Photo of earlier examples on a laptop screen with lots of glare. Using sufficient contrast will enhance the accessibility of your color choices. 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 9
A basic tip for ensuring good contrast Light text on a dark background is easy to read Dark text on a light background is easy to read 09/11/2021 10 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Contrasts that may be hard to read Hard to read Hard to read Hard to read Hard to read? Hard to read? Hard to read? Easy to read Easy to read Easy to read Light text on a dark background is easy to read Dark text on a light background is easy to read 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 11
Checking the contrast of two colors The Web Content Accessibility Guidelines provide a method for us to ensure that when we use color we can do so in a way that is accessible. 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 12
How is color contrast calculated? 1. Determine the relative luminance of the background and foreground color. 2. Compare the relative luminance of the background and foreground color. https://planetcalc.com/7779/ https://www.24a11y.com/2019/color-theory-and-contrast-ratios/ In WCAG 3 the method to assess contrast is changed to the “Advanced Perceptual Contrast Algorithm” 09/11/2021 13 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Use an online checker whocanuse.com Created by Corey Ginnivan @coreyginnivan 09/11/2021 14 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
WCAG sufficient and insufficient contrast 09/11/2021 15 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
3:1 4.5:1 7:1 The ratios to remember Minimum for Graphical Objects / UI 1.4.11 Non-text Contrast (Level AA) Minimum for Text 1.4.3 Contrast (Minimum) (Level AA) AA Enhanced level for Text AAA 1.4.6 Contrast (Enhanced) (Level AAA): 09/11/2021 16 (not to scale) Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Revisiting hard to read contrast examples Hard to read 1.64:1 Hard to read 1.84:1 Hard to read 1.19:1 Hard to read? 2.71:1 Hard to read? 4:1 Hard to read? 2.96:1 Easy to read 21:1 Easy to read 15.27:1 Easy to read 7.58:1 Light text on a dark background is easy to read Dark text on a light background is easy to read 09/11/2021 17 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Using a brand…? 09/11/2021 18 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Bring an intuitive feel. Reduce cognitive load. Exhibit professionalism. Create harmony. A benefit of using your brand is visual consistency 1 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 19 “5 Methods to Achieve Visual Consistency in eLearning”, Karla Gutierrez https://www.shiftelearning.com/blog/visual-consistency-in-elearning
University of Southampton “Common Framework for Online Education” 09/11/2021 20 Structure Engagement Peer to peer interaction Connecting the campus Accessible and Inclusive content Assessment and feedback Organisation Belonging to UoS Connecting the campus Students who have a clear sense of belonging and identify with their programme and their university are more likely to succeed. This will be important for all students, and particularly those joining for the first time into the online environment. Finding ways to incorporate and profile University of Southampton research and community activities will enhance this sense of connection and belonging. Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
“How can we make it simpler for colleagues to identify accessible color combinations within our institutional brand?” 09/11/2021 21 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Brand color accessibility matrix 1 Lookup table to ease the process of checking which color combinations are accessible. https://is.gd/PDFmatrix 09/11/2021 22 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Brand color accessibility matrix 2 • All brand colors are shown. • Where two colors intersect, their accessibility rating is shown. • Iterated upon based on feedback from colleagues. • Began as a PDF, newly recreated as an interactive web page. 09/11/2021 23 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Web-based version https://is.gd/colormatrix 09/11/2021 24 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Explanations, with data 09/11/2021 25 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html This data has proven useful for starting conversations about our brand: “Did you know that we can only use 19% of the color combinations in our brand for text?”
More details available below the matrix 09/11/2021 26 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Exploring your brand Filter to show AA and AAA only and identify the column with the greatest amount. 09/11/2021 27 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Colors that can be used with white Plain Black #231F20 Rich Black #00131D Neutral 1 #495961 Neutral 2 #758D9A Prussian #002E3B Marine 1 #005C84 Shamrock #1E8765 Horizon 3 #E73037 Coral #E73238 Horizon 4 #D5007F Horizon 5 #8D3970 AAA AAA AAA G AAA AAA G G G AA AAA 7 colors can be used for text Colors that can be used with “Rich Black” 11 colors can be used for text 09/11/2021 28 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Appalachian State University https://is.gd/AppalachianMatrix 09/11/2021 29 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
York University 09/11/2021 30 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html https://is.gd/YorkMatrix
Want a matrix for your color palette? Let us know:  The HTML color codes of your brand.  Remember to include white.  If you have ‘names’ for your colors include them, use comma separation.  Email them to Matt: md4@soton.ac.uk You’ll get the matrix files and data sent back within a week or so. Example: #FFFFFF, white #FAFF7F, medicine yellow #FF5154, art pink #91A6FF, science blue 09/11/2021 31 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Conclusion • Explained why accessible use of color is vital and the guidelines we should follow. • Shared our simple approach to check that colors are both accessible and within an institution's agreed color palette. • Invited you to benefit from this approach. 09/11/2021 32 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
Thank you! Any questions? All resources and links are available at: https://matthewdeeprose.github.io/udlh e.html Tamsyn Smith tms2g12@soton.ac.uk Matthew Deeprose md4@soton.ac.uk 09/11/2021 33 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
How to ensure accessible use of color in learning resources and materials aligned to your institution’s brand

More Related Content

How to ensure accessible use of color in learning resources and materials aligned to your institution’s brand

  • 1. How to ensure accessible use of color in learning resources and materials aligned to your institution’s brand Tamsyn Smith & Matthew Deeprose, University of Southampton 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 1
  • 2. Agenda • Why accessible use of color is vital and the guidelines we should follow. • Sharing our simple approach to check that colors are both accessible and aligned to an institution's color palette. • Invite you to benefit from this approach. 09/11/2021 2 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 3. Ensuring equitable access to our learning environment has never been more important. 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 3
  • 4. Color Contrast • 86% of web pages have low contrast text.* • 44% of files uploaded to the Learning Management System have at least one contrast issue. ** “I tend to skip over text that has low contrast because it’s too much of a strain to read it.” *** * WebAim ** Blackboard *** Joe Banks, Tech Lead at 23andMe 09/11/2021 4 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 5. Examples of poor contrast 09/11/2021 5 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html Above examples have insufficient contrast
  • 6. Black text on light backgrounds Your Feedback Assignment deadline Semester 2 timetable Exam information 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 6 Above examples have sufficient contrast
  • 7. Visual impairments 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 7 300 million people have color blindness.* Many more report having difficulties with their sight.** The ability to see color decreases as we age.*** * https://abilitynet.org.uk/blog/visual-impairment-and-computing- common-questions ** http://www.colorblindawareness.org/color-blindness/ *** https://en.wikipedia.org/wiki/Color_blindness Diagram from: https://24ways.org/2012/color-accessibility/
  • 8. Situational visual impairments Using a mobile in outdoors Steve Mason/Photodisc/Getty Images A projector screen in a well-lit room pxfuel.com - Creative Commons Zero - CC0 Screen glare Luke Domy / CC BY-NC-ND 2.0 Working in a poorly lit room. Getty Images 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 8
  • 9. Screen glare on the examples we showed earlier Photo of earlier examples on a laptop screen with lots of glare. Using sufficient contrast will enhance the accessibility of your color choices. 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 9
  • 10. A basic tip for ensuring good contrast Light text on a dark background is easy to read Dark text on a light background is easy to read 09/11/2021 10 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 11. Contrasts that may be hard to read Hard to read Hard to read Hard to read Hard to read? Hard to read? Hard to read? Easy to read Easy to read Easy to read Light text on a dark background is easy to read Dark text on a light background is easy to read 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 11
  • 12. Checking the contrast of two colors The Web Content Accessibility Guidelines provide a method for us to ensure that when we use color we can do so in a way that is accessible. 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 12
  • 13. How is color contrast calculated? 1. Determine the relative luminance of the background and foreground color. 2. Compare the relative luminance of the background and foreground color. https://planetcalc.com/7779/ https://www.24a11y.com/2019/color-theory-and-contrast-ratios/ In WCAG 3 the method to assess contrast is changed to the “Advanced Perceptual Contrast Algorithm” 09/11/2021 13 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 14. Use an online checker whocanuse.com Created by Corey Ginnivan @coreyginnivan 09/11/2021 14 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 15. WCAG sufficient and insufficient contrast 09/11/2021 15 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 16. 3:1 4.5:1 7:1 The ratios to remember Minimum for Graphical Objects / UI 1.4.11 Non-text Contrast (Level AA) Minimum for Text 1.4.3 Contrast (Minimum) (Level AA) AA Enhanced level for Text AAA 1.4.6 Contrast (Enhanced) (Level AAA): 09/11/2021 16 (not to scale) Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 17. Revisiting hard to read contrast examples Hard to read 1.64:1 Hard to read 1.84:1 Hard to read 1.19:1 Hard to read? 2.71:1 Hard to read? 4:1 Hard to read? 2.96:1 Easy to read 21:1 Easy to read 15.27:1 Easy to read 7.58:1 Light text on a dark background is easy to read Dark text on a light background is easy to read 09/11/2021 17 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 18. Using a brand…? 09/11/2021 18 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 19. Bring an intuitive feel. Reduce cognitive load. Exhibit professionalism. Create harmony. A benefit of using your brand is visual consistency 1 09/11/2021 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html 19 “5 Methods to Achieve Visual Consistency in eLearning”, Karla Gutierrez https://www.shiftelearning.com/blog/visual-consistency-in-elearning
  • 20. University of Southampton “Common Framework for Online Education” 09/11/2021 20 Structure Engagement Peer to peer interaction Connecting the campus Accessible and Inclusive content Assessment and feedback Organisation Belonging to UoS Connecting the campus Students who have a clear sense of belonging and identify with their programme and their university are more likely to succeed. This will be important for all students, and particularly those joining for the first time into the online environment. Finding ways to incorporate and profile University of Southampton research and community activities will enhance this sense of connection and belonging. Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 21. “How can we make it simpler for colleagues to identify accessible color combinations within our institutional brand?” 09/11/2021 21 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 22. Brand color accessibility matrix 1 Lookup table to ease the process of checking which color combinations are accessible. https://is.gd/PDFmatrix 09/11/2021 22 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 23. Brand color accessibility matrix 2 • All brand colors are shown. • Where two colors intersect, their accessibility rating is shown. • Iterated upon based on feedback from colleagues. • Began as a PDF, newly recreated as an interactive web page. 09/11/2021 23 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 24. Web-based version https://is.gd/colormatrix 09/11/2021 24 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 25. Explanations, with data 09/11/2021 25 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html This data has proven useful for starting conversations about our brand: “Did you know that we can only use 19% of the color combinations in our brand for text?”
  • 26. More details available below the matrix 09/11/2021 26 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 27. Exploring your brand Filter to show AA and AAA only and identify the column with the greatest amount. 09/11/2021 27 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 28. Colors that can be used with white Plain Black #231F20 Rich Black #00131D Neutral 1 #495961 Neutral 2 #758D9A Prussian #002E3B Marine 1 #005C84 Shamrock #1E8765 Horizon 3 #E73037 Coral #E73238 Horizon 4 #D5007F Horizon 5 #8D3970 AAA AAA AAA G AAA AAA G G G AA AAA 7 colors can be used for text Colors that can be used with “Rich Black” 11 colors can be used for text 09/11/2021 28 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 29. Appalachian State University https://is.gd/AppalachianMatrix 09/11/2021 29 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 30. York University 09/11/2021 30 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html https://is.gd/YorkMatrix
  • 31. Want a matrix for your color palette? Let us know:  The HTML color codes of your brand.  Remember to include white.  If you have ‘names’ for your colors include them, use comma separation.  Email them to Matt: md4@soton.ac.uk You’ll get the matrix files and data sent back within a week or so. Example: #FFFFFF, white #FAFF7F, medicine yellow #FF5154, art pink #91A6FF, science blue 09/11/2021 31 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 32. Conclusion • Explained why accessible use of color is vital and the guidelines we should follow. • Shared our simple approach to check that colors are both accessible and within an institution's agreed color palette. • Invited you to benefit from this approach. 09/11/2021 32 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html
  • 33. Thank you! Any questions? All resources and links are available at: https://matthewdeeprose.github.io/udlh e.html Tamsyn Smith tms2g12@soton.ac.uk Matthew Deeprose md4@soton.ac.uk 09/11/2021 33 Tamsyn Smith and Matthew Deeprose https://matthewdeeprose.github.io/udlhe.html

Editor's Notes

  1. Tamsyn Introduce who we are and brief mention of our roles and interest in accessibility and UDL.
  2. ղ
  3. Tamsyn Examples taken from: - https://www.essentialaccessibility.com/blog/covid-19-highlights-the-importance-of-digital-accessibility-and-inclusion/ - https://knowbility.org/blog/2020/accessibility-in-your-covid-response/ - https://modelviewculture.com/pieces/in-the-middle-of-a-pandemic-covid-19-information-remains-inaccessible-to-visually-impaired-people
  4. Matt
  5. Matt
  6. Matt
  7. Matt
  8. Tamsyn
  9. Tamsyn
  10. Tamsyn
  11. Tamsyn
  12. Tamsyn
  13. Matt
  14. Matt
  15. Matt
  16. Matt https://www.w3.org/TR/WCAG21/#non-text-contrast https://www.w3.org/TR/WCAG21/#contrast-minimum https://www.w3.org/TR/WCAG21/#contrast-enhanced
  17. Matt
  18. Tamsyn https://www.kent.ac.uk/brand/downloads/brand-guidelines.pdf  https://www.ucl.ac.uk/cam/brand/guidelines/color  https://www.stir.ac.uk/brand-bank/visual-assets/color-palette/  https://www.gla.ac.uk/myglasgow/staff/brandtoolkit/brandelements/colors/  https://www.staffnet.manchester.ac.uk/brand/visual-identity/color/ 
  19. Tamsyn
  20. Tamsyn
  21. Tamsyn
  22. Matt
  23. Matt
  24. Matt
  25. Matt
  26. Matt
  27. Matt
  28. Matt
  29. Tamsyn
  30. Tamsyn
  31. Tamsyn
  32. Tamsyn
  33. Tamsyn
  34. POUR – perceivable, operable understandable and reliable The area we're talking about is perceivable
  35. Tamsyn