Mysteries of Accessibility:�Using Color and Composing Alt Text

MS PowerPoint Handout

Accessibility Resource Links

• Digital Content Accessibility Checklist (Google Doc)
• Priority Checklist for Transitioning to Meet Accessibility (Google Slides)
• Grackle Suite: Making Documents from G Suite Accessible (Google Slides)

Color Contrast Resource Links

• How to Locate Hex Code (Google Doc)
• Rapid Tables RGB to Hex Converter
• WebAIM Color Contrast Checker
• Using WebAIM Color Contrast Checker (Google Doc)
• ColorSafe (Color Palette Generator)
• Using ColorSafe (Google Doc)
• Eye Dropper Chrome Extension
• Using Eye Dropper Chrome Extension (Google Doc)
• Colorblindly Chrome Extension
• Creating Accessible Content: Color (Portland Community College)

Alt Text Resource Links

• Alt Text Decision Tree (Google Slides)
• Web Accessibility Tutorials: Images Concepts (W3C)
• Web Accessibility Tutorials: Decorative Images (W3C)
• Alternative Text (WebAIM)
• How long can “alt” text be? (UW Do-It Center)
• Creating Accessible Content: Alternative Text (Portland Community College)

Color Contrast Practice

1. Bad Example
2. Good Example
3. Worked Example

Color Contrast - Bad Example

Fuschia foreground/Dark cyan background

Color Contrast - Good Example

Gainsboro foreground/Teal background

Color Contrast�Worked Example Original

Royal blue foreground/Midnight blue background

Color Contrast Worked Example�Edit to Meet Accessibility Guidelines

Royal blue foreground/Midnight blue background

Alt Text Practice

1. Bad Example
2. Good Example
3. Worked Example

Alt Text - Bad Example

Context of image placement:

Investigative Journalism Course

Alt Text - Good Example

Context of image placement:

Public Policy Course

Alt Text�Worked Example Original

Context of image placement:

Higher Ed Circulatory System Module

Alt Text Worked Example�Edit to Meet Accessibility Guidelines

Context of image placement:

Higher Ed Circulatory System Module

Thanks!

Credits: This presentation template was created by Slidesgo,�including infographics & images by Freepik.