1 of 21

Six Essential Steps

Lunch & Learn Series:

​

Color and Contrast

1

Ana Palla, Ph.D.

Senior IT Accessibility and UX Specialist

​

Sue Johnston, M.S., MAT

Accessible Learning Designer

​

Academic Technology & Innovation | DIT

University of Maryland, College Park

Slides available: https://go.umd.edu/it-access-color-contrast

2 of 21

Fall 2023 - Schedule

Lunch & Learn

  • Session 1: Headings and Links (10/25 presentation slides)
  • Session 2: Color & Contrast (11/1)
  • Session 3: Images & Tables (11/8)
  • Session 4: Media (11/15)

2

3 of 21

WELCOME | 6 Essential Steps Video

3

  • Video - 6 Essential Steps (25min)
    • Intro to 6 essential steps
    • Examples on how to apply steps in Microsoft Word.

​

  • Video - 6 Essential Steps (11min)
    • Intro to 6 essential steps

​

4 of 21

IT Accessibility: �Six Essential Steps

  1. Headings
  2. Links
  3. Color & Contrast
  4. Images
  5. Tables
  6. Media

​

DIY IT Accessibility Handout

4

5 of 21

3 - Color & Contrast

6 of 21

Color & Contrast

​

  • Use sufficient color contrast
  • Avoid using color alone to convey meaning
  • Add labels to charts and graphs

​

​

Resources:

7 of 21

Color blindness

  • More accurately color “deficiency”
  • 1 in 12 people born with XY chromosomes
  • Most of us see color differently

7

NIH National Eye Institute

8 of 21

Use of color alone to convey the status of the assignment

9 of 21

Use of color and status

10 of 21

Avoid using color alone to convey different lines in a graph

why is this wrong?

11 of 21

locate lines based on shape and label proximity​​

Orange

Orange

12 of 21

Avoid using color alone to convey meaning

Using

Color

Alone

13 of 21

Using Color,

Patterns

& Labels

14 of 21

Use sufficient color contrast

UMD brand colors: https://brand.umd.edu/colors

14

15 of 21

Use sufficient color contrast

16 of 21

Use Color Contrast Checkers: Ally

​

Ally Accessibility Instructor Feedback

​

16

17 of 21

Example in ELMS-Canvas page

Color Contrast & Use of color to convey meaning

​

​

17

18 of 21

Use Color Contrast Checker

​

TPGI Colour Contrast Analyser

​

​

WebAim Color Contrast Checker

18

19 of 21

Use sufficient color contrast - text in images

Resources:

https://webaim.org/articles/contrast/

​

20 of 21

Questions & Comments

20

Slides available: https://go.umd.edu/it-access-headings-and-links

21 of 21

More Resources

The Six Essential Steps:

Enable and Edit Machine Captions

  • Panopto
  • Zoom
  • YouTube

​

21

Slides available: https://go.umd.edu/it-access-color-contrast