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

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

Ensuring equitable access to our learning
environment has never been more important.
09/11/2021
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

Examples of poor contrast
09/11/2021 5
Above examples have insufficient contrast

Black text on light backgrounds
Your Feedback
Assignment
deadline
Semester 2
timetable
Exam information
09/11/2021
Above examples have sufficient contrast

Visual impairments
09/11/2021
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

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

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

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
09/11/2021

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

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

Use an online checker
whocanuse.com
Created by Corey Ginnivan
@coreyginnivan
09/11/2021 14

WCAG sufficient and insufficient contrast
09/11/2021 15

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)

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
09/11/2021 17

Using a brand…?
09/11/2021 18

Bring an intuitive
feel.
Reduce cognitive
load.
Exhibit
professionalism.
Create harmony.
A benefit of using your brand is visual consistency 1
09/11/2021
“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.

“How can we make it
simpler for colleagues to
identify accessible color
combinations within our
institutional brand?”
09/11/2021 21

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

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

Web-based version
https://is.gd/colormatrix
09/11/2021 24

Explanations, with data
09/11/2021 25
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

Exploring your brand
Filter to show AA and AAA only
and identify the column with the
greatest amount.
09/11/2021 27

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

Appalachian State University
https://is.gd/AppalachianMatrix
09/11/2021 29

York University
09/11/2021 30
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

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

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

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

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

More Related Content

More from Matthew Deeprose (14)

Recently uploaded (20)

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

Editor's Notes