Web Accessibility for Users with Color Blindness

Jaclyn Puntillo
Graduate Student
Boise State University

Learner Description: This web page is intended for beginning web designers in order to create awareness of web accessibility and to guide them when they are making aesthetic choices so that their websites are inclusive and usable by all, particularly by users with color blindness.

[What is Web Accessibility?] [Resources for Designing Accessible Websites] [Tools for Testing Accessibility]


What is Web Accessibility?

Simply put, web accessibility is designing content and information for the World Wide Web that is easily accessed by all people, regardless of ability.

According to Article 9 of the United Nations' Convention on the Rights of Persons with Disabilities and Optional Protocol, State Parties have agreed "to enable persons with disabilities to live independently and participate fully in all aspects of life, appropriate measures [will be taken] to ensure to persons with disabilities access, on an equal basis with others, to the physical environment, to transportation, to information and communications, including information and communications technologies and systems."

This means that the United Nations (all of the 193 member countries) have agreed that access to information and communication on the World Wide Web is not a luxury, but a human right. Therefore, web designers have a duty to design information that it is equally and easily available to all diverse persons.

One aspect of web accessibility that is easily overlooked, particularly by novice web designers, is accessibility for people with visual disabilities. Rather than considering accessibility, focus may fall on aesthetics.

Below you will find tools for accessible web design and evaluation instruments that test websites for accessibility, paying particular attention to accessibility for users with color blindness.

[Back to top]


Resources for Designing Accessible Websites for Users with Color Blindness

The following is a list of resources that will help beginning web designers chose color palettes that are accessible and usable by all.

Web AIM: Visual Disabilities: This website gives designers key concepts for color blindness and suggestions on how to convey important information on the web without using color.

CSS for Color Blindness: This website offers designers simple tips and tricks on using CSS to design for optimal usability and accessibility.

Safe Web Colours for Colour-Deficient Vision: This website provides information on designing for color vision deficiency, and includes a link to a useful design article by Christine Rigden (1999) titled "The Eye of the Beholder'—Designing for Colour-Blind Users." Rigden discusses the basics and problems of color vision, and gives designers color palettes that are ideal for users with colorblindness.

Color Blindness and Web Design: This website explores the challenges of designing for users with color blindness, and offers a list of colors that designers can use that are accessibility "friendly."

We Are Color Blind: The authors of this website are "dedicated to making the web a better place for the color blind." The site contains a multitude of articles on colorblindness, but more importantly for designers, they give examples of websites and web tools that are considered "Good" or "Bad" for people with color blindness.

[Back to top]


Tools for Testing Accessibility for Users with Color Blindness

The following is a list of free tools that beginning web designers can use to test their websites for accessibility for people with color blindness.

Colour Check: This web tool allows designers to enter the hex codes (six-digit codes identifying color, ex. #000000) for any two colors to determine contrast and difference. Per the Website Accessibility Initiative, color combinations should provide enough contrast that they can easily be viewed by someone with color blindness or when viewed in black and white.

Color Laboratory: This web tool is a color simulation. It allows the designer to select any combination of colors, and then view the combination as perceived by a person with color blindness. This tool will simulate protanpia, deutanopia, tritanopia, typical achromatopsia, protanomaly, deutanomaly, tritanomaly, and atypical achromatopsia.

Color Blind Web Page Filtering: This web tool is also a color simulator. It allows designers to enter the URL of their web page, and then view the page in a variety of filters that mimic different types of color blindness.

Color Oracle: This is a color simulator download available for Windows, Mac and Linux. Color Oracle provides a full-screen filter independent of the applications that are running, so a designer is able to see how their work appears to people with color blindness in real time.

Sim Daltonism: This is another color simulator download, but it is only available for Mac OS X. Sim Daltonism provides a palette filter that will show what a portion of the scren looks like to a person with color blindness when the user rolls the pointer over the area they would like to test. Available filters include: monochromacy, protanpia, deutanopia, tritanopia protanomaly, deutanomaly,and tritanomaly

[Back to top] [Return to homepage]