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.


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 Mission, Vision, Values & Purposes 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 pages are hosted by SpringShare. Springshare Privacy Policy.