Making it simple to ensure the use of colour is both on brand and accessible
Presenter: Matthew Deeprose.
Presented as part of the "Using technology to develop inclusive learning experiences" webinar at the University of Kent.
Watch the presentation
View the slides on SlideShare
Access the presentation files
Example brand accessibility matrix
Would you like a brand colour accessibility matrix for your colour palette?
I can generate a brand colour accessibility matrix for your colour palette. To do so I will need to know:- Create text or CSV (comma separated) file containing the HTML colour codes of your brand. Remember to include the color white, it may not be in your official brand, but it is very likely that you use it in your materials.
- If you use 'names' for your colours, include them as shown in the example below.
- Email your text or CSV file to me and let me know the name of your institution or brand. The institution or brand name will appear in the title of the page.
- Within a week I will send you a zip file containing the HTML files and dataset that you may then use with your colleagues or host on your website. You are free to make any changes you wish to the files, copy them, share them as you like. Here is an example zip file for the University of Southampton accessibility matrix. The script takes between 1 and 4 hours to run depending on the amount of colours in the brand. The length of time is because the WebAIM API is used for checking and I leave a ten second delay between each query so as not to hammer it.
#FFFFFF, White
#FAFF7F, Medicine yellow
#FF5154, Art pink
#91A6FF, Science blue
#FF0000, Humanities red
#228B22, Biology green
#181818, University black.
#FAFF7F, Medicine yellow
#FF5154, Art pink
#91A6FF, Science blue
#FF0000, Humanities red
#228B22, Biology green
#181818, University black.
Presentation Synopsis
With more than two million people in the UK living with a visual impairment and many more having difficulties with their sight, it is crucial that, when we create content, we make accessible colour choices.
I will explain the importance of considering contrast when we use colour and share my own journey and lessons that resulted in the development of a method to make it simpler and easier to help my colleagues make accessible colour choices.
If time allows I will demonstrate further real-world examples and solutions that you can replicate at your own institution.
Links used in the presentation (in order of appearance)
- COVID-19 Highlights the Importance of Digital Accessibility and Inclusion.
- Accessibility must be part of your COVID-19 response.
- In The Middle of A Pandemic, COVID-19 Information Remains Inaccessible to Visually Impaired People.
- The WebAIM Million: An annual accessibility analysis of the top 1,000,000 home pages.
- Accessibility and Me: Joe Banks, Tech Lead at 23andMe.
- Colour Accessibility by Geri Coady.
- Visual impairment and computing - common questions (AbilityNet).
- What is colour blindness?.
- Colour blindness (Wikipedia).
- Calculating Relative luminance and contrast ratio.
- Colour Theory and Contrast Ratios.
- Advanced Perceptual Contrast Algorithm.
- Who can use?: this site checks the contrast of two colours and returns a result. It also shows how this colour choice has an impact on visual impairments and situational impairements.
- WCAG: Understanding Success Criterion 1.4.11: Non-text Contrast.
- WCAG: Understanding Success Criterion 1.4.3: Contrast (Minimum).
- WCAG: Understanding Success Criterion 1.4.6: Contrast (Enhanced).
- 5 Methods to Achieve Visual Consistency in eLearning.
- PDF version of University of Southampton Brand colour accessibility matrix.
- Web based version of University of Southampton Brand colour accessibility matrix.
Links used in the "if time allows" part of the presentation (in order of appearance)
- 10 Days of a11y by Lindsey Kopacz.
- JISC Accessibility Mailing List.
- JISC Accessibility Community.
- Access Technology Higher Education Network Mailing List.
- WebAim Mailing List.
- Find the Perfect Contrast Between Light Text and a Background Image.
- "Color Safe": Find accessible colours that contrast with a specific colour you wish to you.
- "tanaguru contrast finder": Find good constrasts, for web accessibility, between two colours you specify.
- PowerToys for Windows 10 has a fantastic colour picker tool, this helps you identify colour codes.
- Let email correspondents know that you prefer to receive accessible content.
Further resources
Why is Colour Contrast important?
- Accessibility 101: Colour Contrast.
- Colour Contrast And Why You Should Rethink It.
- What is colour contrast accessibility? 5 questions and answers.
- Colour Accessibility.
- Contrast and Colour Accessibility.
Useful tools
- Use "Who can use.com" to find out the contrast of two colours and how this impacts those with visual impairments.
- PowerToys for Windows 10 has a fantastic colour picker tool, this helps you identify colour codes.
- How pick colour codes on a Mac.
- Convert RGB colour codes to HTML/Hex colour codes.
- Convert HTML/Hex colour codes to RGB colour codes.
- "Color Safe": Find accessible colours that contrast with a specific colour you wish to you.
- "tanaguru contrast finder": Find good constrasts, for web accessibility, between two colours you specify.
- ColorBox can help you to design a new accessible colour palette. This explanatory blog post is useful to read first.
- Find the Perfect Contrast Between Light Text and a Background Image.
Learn more about digital accessibility
- WCAG 2.1.
- WCAG 2.2 (working draft available).
- WCAG 3.0 (first draft available).
- Advanced Perceptual Contrast Algorithm (new contrast measurement used in WCAG 3.0).
- Levels of WCAG Conformance.
- 10 Days of a11y by Lindsey Kopacz.
- Accessibility with Lindsey.
- Laura L. Carlson's weekly newsletter with selected links to new Accessibility and CSS content from around the web.
- Microsoft Inclusive Design Toolkit.
- Web Accessibility checklist.
- Accessibility section of the Mozilla Developer Network.
February 2021