Skip to Main Content

Universal Design for Learning (UDL): Color Guide Web Design

Many students do not want to self-identify as disabled. If you design your course from the start with learning differentiation in mind, everyone does better, and special accommodation needs can disappear

Color Guide for Color-Blind Accessible Web Design

Colorblind spectrums

I put together some examples based on the results of an online "Color Blindness Simulator" (which is no longer available). There are many simulators available on the internet.

ValColorGuide

Notes:
Use white instead of pastel or light colors.
Everybody can see blue.
For some color blind types:
Red = Green
Red = Black
Blue = Purple

Darkness of tint can improve discernibility.

If you stick to black, white, and cyan /magenta/yellow like a photocopier, then you should have fewer problems.

  • Blues hues are too similar; to greenish-blue or purplish-blue.
  • Yellow-green/yellow/gold are easily confused with orange/brown)  
  • Magenta/reds and gray can be similar under various conditions.

Coblis test

Example of light backgrounds - Shows why you should not JUST use color for indicating direction

chat loading...

About UsContact UsFVTC Terms of ServiceSitemap
FVTC Privacy StatementFVTC Library Services Accessibility Statement
DISCLAIMER: Any commercial mentions on our website are for instructional purposes only. Our guides are not a substitute for professional legal or medical advice.

Fox Valley Technical College • Library Services • 1825 N. Bluemound Drive • Room G113
Appleton, WI 54912-2277 • United States • (920) 735-5653
© 2024 • Fox Valley Technical College • All Rights Reserved.

The https://library.fvtc.edu/ pages are hosted by SpringShare. Springshare Privacy Policy.