Accessible Technology Initiative (ATI)

Tips & Tutorials — Creating Accessible Content

How do I use colors appropriately in web design?

There are two sides to this issue: use of color in layout and design and use of color to facilitate accessibility. There are many tools to simulate color blindness that can assist designers in ensuring that their use of color will not create accessibility issues.

Tips, Techniques & Tutorials: Color & Design

Simulation Tools:

Colour Blindness Simulator
This free simulator will check an image to show you how a colorblind user would see it. You can upload a JPEG image of no more than 1000 pixels x 1000 pixels (100 KB filesize or less) to see how colour blind users may see it.

Colour Check
This free online tool determines the colour difference and contrast between any two colours and whether or not the two colors have enough contrast and brightness.

ColorScheme
Color schemes generator that adjusts color schemes to accommodate various forms of visual impairments.

For further information:

  • WebAIM: Color blindness as a visual disability and discussion of the various types.
  • Evolt.org: Discussion of color and accessibility in the context of WC3’s Web Content Accessibility Guidelines (1.0 and 2.0).