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

A Lightning Talk at UDLHE Digicon 2021

Presenters: Tamsyn Smith and Matthew Deeprose.

Watch the presentation

View the slides on SlideShare

Access the presentation

Example brand accessibility matrix

Would you like a brand colour accessibility matrix for your color palette?

We can generate a brand colour accessibility matrix for your color palette. To do so we will need to know:
  1. Create text or CSV (comma separated) file containing the HTML color 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.
  2. If you use 'names' for your colors, include them as shown in the example below.
  3. Email your text or CSV file to Matt and let him know the name of your institution or brand. The institution or brand name will appear in the title of the page.
  4. Within a week Matt 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.
Example file contents
#FFFFFF, White
#FAFF7F, Medicine yellow
#FF5154, Art pink
#91A6FF, Science blue
#FF0000, Humanities red
#228B22, Biology green
#181818, University black.

Presentation synopsis

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.

Links used in the presentation (in order of appearance)

Further resources

Why is Colour Contrast important?

Useful tools

Learn more about digital accessibility

February 2021