Making it simple to ensure the use of colour is both on brand and accessible
Download as PPTX, PDF0 likes435 views
The document outlines the importance of color contrast for accessibility in branding and design at the University of Southampton. It shares a developed method for ensuring that color choices are accessible and invites readers to utilize this approach, providing further resources and tips. Additionally, it includes a brand color accessibility matrix to assist in identifying accessible color combinations.
Making it simple to ensure the use of colour is both on brand and accessible
- 1. Making it simple to ensure the use of colour is both on brand and accessible Matthew Deeprose University of Southampton https://matthewdeeprose.github.io/kent.html 1 All resources, links, and examples are available at: https://matthewdeeprose.github.io/kent.html
- 2. Agenda (1) 2 https://matthewdeeprose.github.io/kent.html The importance of considering contrast when we use colour. Share the approach I developed for checking that when we use our brand palette our colour choices are accessible. Invite you to benefit from this method if you wish. At the end of the slide deck, I have added further useful tips and techniques for you to use right now. Slides, links and more available at here.
- 3. Agenda (2) 3 https://matthewdeeprose.github.io/kent.html The importance of considering contrast when we use colour. Share the approach I developed for checking that when we use our brand palette our colour choices are accessible. Invite you to benefit from this method. At the end of the slide deck, I have added further useful tips and techniques for you to use right now. Slides, links and more available at here.
- 4. Agenda (3) 4 https://matthewdeeprose.github.io/kent.html The importance of considering contrast when we use colour. Share the approach I developed for checking that when we use our brand palette our colour choices are accessible. Invite you to benefit from this method. At the end of the slide deck, I have added further useful tips and techniques for you to use right now. Slides, links and more available at here.
- 5. Agenda (4) 5 https://matthewdeeprose.github.io/kent.html The importance of considering contrast when we use colour. Share my simple approach to check that when we use our brand that our colour choices are accessible. Invite you to benefit from this method. At the end of the slide deck, I have added further useful tips and techniques for you to use right now. Slides, links and more available at here.
- 6. Agenda The importance of considering contrast when we use colour. Sharing my simple approach to check that colours are both accessible and aligned to an institution's colour palette. My invitation to share this method with you. At the end of the slide deck, I have added further useful tips and techniques for you to use right now. 6 https://matthewdeeprose.github.io/kent.html
- 7. Ensuring equitable access to our learning environment has never been more important. 7 https://matthewdeeprose.github.io/kent.html
- 8. Introducing colour contrast 8 https://matthewdeeprose.github.io/kent.html Colour 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
- 9. Examples of poor contrast 9 https://matthewdeeprose.github.io/kent.html Examples of poor contrast Above examples have insufficient contrast
- 10. Examples of better contrast 10 https://matthewdeeprose.github.io/kent.html Black text on light backgrounds Your Feedback Assignment deadline Semester 2 timetable Exam information Above examples have sufficient contrast
- 11. Information about certain visual impairments related to colour 11 https://matthewdeeprose.github.io/kent.html Visual impairments 300 million people have colour blindness.* Many more report having difficulties with their sight.** The ability to see colour decreases in old age.*** * https://abilitynet.org.uk/blog/visual-impairment-and-computing- common-questions ** http://www.colourblindawareness.org/colour-blindness/ *** https://en.wikipedia.org/wiki/Color_blindness Diagram from: https://24ways.org/2012/colour-accessibility/
- 12. Situational visual impairments 12 https://matthewdeeprose.github.io/kent.html 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
- 13. Examples on a screen with glare 13 https://matthewdeeprose.github.io/kent.html Photo of earlier examples on a laptop screen with lots of glare. Using sufficient contrast will enhance the accessibility of your colour choices.
- 14. A basic tip for ensuring good contrast 14 https://matthewdeeprose.github.io/kent.html Light text on a dark background is easy to read Dark text on a light background is easy to read
- 15. Contrasts that may be hard to read 15 https://matthewdeeprose.github.io/kent.html 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
- 16. Checking the contrast of two colours 16 https://matthewdeeprose.github.io/kent.html The Web Content Accessibility Guidelines provide a method for us to ensure that when we use colour we can do so in a way that is accessible.
- 17. How is colour contrast calculated? 17 https://matthewdeeprose.github.io/kent.html 1. Determine the relative luminance of the background and foreground colour. 2. Compare the relative luminance of the background and foreground colour. 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”
- 18. Use an online checker 18 https://matthewdeeprose.github.io/kent.html whocanuse.com Created by Corey Ginnivan @coreyginnivan
- 19. WCAG sufficient and insufficient contrast 19 https://matthewdeeprose.github.io/kent.html
- 20. 3:1 4.5:1 7:1 The ratios to remember 20 https://matthewdeeprose.github.io/kent.html AA Minimum for Graphical Objects / UI 1.4.11 Non-text Contrast (Level AA) Minimum for Text 1.4.3 Contrast (Minimum) (Level AA) Enhanced level for Text AAA 1.4.6 Contrast (Enhanced) (Level AAA): (not to scale)
- 21. Revisiting hard to read contrast examples 21 https://matthewdeeprose.github.io/kent.html 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
- 23. A benefit of using your brand is visual consistency 23 https://matthewdeeprose.github.io/kent.html Bring an intuitive feel. Reduce cognitive load. Exhibit professionalism. Create harmony. “5 Methods to Achieve Visual Consistency in eLearning”, Karla Gutierrez https://www.shiftelearning.com/blog/visual-consistency-in-elearning
- 24. University of Southampton “Common Framework for Online Education” 24 https://matthewdeeprose.github.io/kent.html 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.
- 25. Question 25 https://matthewdeeprose.github.io/kent.html “How can we make it simpler for colleagues to identify accessible colour combinations within our institutional brand?”
- 26. Based on experience of developing a new theme for our VLE. 26 https://matthewdeeprose.github.io/kent.html
- 27. Brand colour accessibility matrix 1 27 https://matthewdeeprose.github.io/kent.html Lookup table to ease the process of checking which colour combinations are accessible. https://is.gd/PDFmatrix
- 28. Brand colour accessibility matrix 2 • All brand colours are shown. • Where two colours intersect, their accessibility rating is shown. • Iterated upon based on feedback from colleagues. • Began as a PDF, newly recreated as an interactive web page. 28 https://matthewdeeprose.github.io/kent.html
- 30. Explanations, with data 30 https://matthewdeeprose.github.io/kent.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?”
- 31. More details available below the matrix 31 https://matthewdeeprose.github.io/kent.html
- 32. Real-world usage 32 https://matthewdeeprose.github.io/kent.html History Film English Archaeology Email warning Request from Humanities faculty to have course templates with consistent, accessible colour schemes across each subject area.
- 33. Want a matrix for your colour palette? 33 https://matthewdeeprose.github.io/kent.html Let me know: The HTML colour codes of your brand. Remember to include white. If you have ‘names’ for your colours include them, use comma separation. Email them to Matt: md4@soton.ac.uk We’ll send you the files within a week or so. Example: #FFFFFF, white #FAFF7F, medicine yellow #FF5154, art pink #91A6FF, science blue
- 34. Conclusion 34 https://matthewdeeprose.github.io/kent.html The importance of considering contrast when we use colour. Share the approach I developed for checking that when we use our brand palette our colour choices are accessible. Invited you to benefit from this method. At the end of the slide deck, I have added further useful tips and techniques for you to use right now. Slides, links and more available at here.
- 35. Conclusion (1) 35 https://matthewdeeprose.github.io/kent.html The importance of considering contrast when we use colour. Share the approach I developed for checking that when we use our brand palette our colour choices are accessible. Invited you to benefit from this method. At the end of the slide deck, I have added further useful tips and techniques for you to use right now. Slides, links and more available at here.
- 36. Conclusion (2) 36 https://matthewdeeprose.github.io/kent.html The importance of considering contrast when we use colour. Share the approach I developed for checking that when we use our brand palette our colour choices are accessible. Invited you to benefit from this method. At the end of the slide deck, I have added further useful tips and techniques for you to use right now. Slides, links and more available at here.
- 37. Conclusion (3) 37 https://matthewdeeprose.github.io/kent.html The importance of considering contrast when we use colour. Share the approach I developed for checking that when we use our brand palette our colour choices are accessible. Invited you to benefit from this method. At the end of the slide deck, I have added further useful tips and techniques for you to use right now, could be part of a future session?
- 38. Thank you! Any questions? 38 https://matthewdeeprose.github.io/kent.html
- 39. Time for further practical tips? 39 https://matthewdeeprose.github.io/kent.html
- 40. Learning more: for beginners “I've created 10 days of tips for you. Every day, you'll get a tidbit to your inbox. Each tip is low effort and high impact. You can apply them quickly and dramatically improve accessibility.” 10 days of a11y by Lindsey Kopacz 40 https://matthewdeeprose.github.io/kent.html
- 41. Learning more: mailing lists and teams JISC Accessibility Mailing List JISC Accessibility Community Access Technology Higher Education Network Mailing List WebAim Mailing List 41 https://matthewdeeprose.github.io/kent.html
- 42. How to deal with text over images? 42 https://matthewdeeprose.github.io/kent.html Mitesh7587 / Wikimedia / CC BY-SA 4.0
- 43. Text with a background image 43 https://matthewdeeprose.github.io/kent.html This website allows you to upload your image and set the text colour you wish to use. It calculates the optimum overlay to place over the image for the text to have sufficient contrast. The overlay can then be created in Photoshop, PowerPoint, or using CSS etc. https://css-tricks.com/nailing-the-perfect-contrast-between-light-text-and-a-background-image/
- 44. Do not use colour as the only way to convey meaning. 44 https://matthewdeeprose.github.io/kent.html
- 45. Example of why you should not use colour as the only means to convey meaning. 45 https://matthewdeeprose.github.io/kent.html Ready to submit your final assignment? Example using simulated Deuteranopia rendering in Google Chrome
- 46. Example where colour is not the only means to convey meaning. 46 https://matthewdeeprose.github.io/kent.html Ready to submit your final assignment? No Yes Example using simulated Deuteranopia rendering in Google Chrome
- 47. Examples using pie charts Insufficient contrast between colours. 47 https://matthewdeeprose.github.io/kent.html Use of labels means colour is not the only way to understand the graph.
- 48. Examples using line graphs Insufficient contrast between colours. Use of markers / dotted lines means colour is not the only way to understand the graph. 48 https://matthewdeeprose.github.io/kent.html
- 49. Is it understandable in black and white? 49 https://matthewdeeprose.github.io/kent.html
- 50. Is it understandable in black and white? (2) 50 https://matthewdeeprose.github.io/kent.html
- 51. Finding an accessible match to a colour you must use 51 https://matthewdeeprose.github.io/kent.html http://colorsafe.co/
- 52. http://colorsafe.co/ 52 https://matthewdeeprose.github.io/kent.html 1. Set a colour you have to use. 2. Set criteria such as font size, and WCAG conformance level target. 3. Generate Colour Palette and choose the type of colour with which you wish to use your chosen colour.
- 53. http://colorsafe.co/ (2) 53 https://matthewdeeprose.github.io/kent.html Select a colour. Verify ratio. Copy hex code and use.
- 54. I have two colours I must use, but they do not contrast enough… 54 https://matthewdeeprose.github.io/kent.html https://contrast-finder.tanaguru.com/
- 56. Choose a colour that is so close no one will notice? 56 https://matthewdeeprose.github.io/kent.html
- 57. How to find out an HTML/RGB colour code? 57 https://matthewdeeprose.github.io/kent.html
- 58. Microsoft PowerToys for Windows 10 •Free •Features excellent colour picker. https://github.com/microsoft/PowerToys/releases/ 58 https://matthewdeeprose.github.io/kent.html
- 59. Set options and then use keyboard shortcut 59 https://matthewdeeprose.github.io/kent.html
- 60. Copy colour code to clipboard, or show HEX / RGB / HSL etc 60 https://matthewdeeprose.github.io/kent.html
- 61. Accessibility checkers in Ms Office 61 https://matthewdeeprose.github.io/kent.html Tip! Set that you prefer accessible content. go.soton.ac.uk/dc7
- 62. Accessibility checkers in Ms Office (1) 62 https://matthewdeeprose.github.io/kent.html
- 63. Accessibility checkers in Ms Office (2) 63 https://matthewdeeprose.github.io/kent.html
- 64. Exploring your brand 64 https://matthewdeeprose.github.io/kent.html Filter to show AA and AAA only and identify the column with the greatest amount.
- 65. Colours that can be used with white 65 https://matthewdeeprose.github.io/kent.html 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 Colours can be used for Text Colours that can be used with “Rich Black” 11 Colours can be used for Text