Posts Tagged ‘color’

Color blindness (color vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. This is about 4.5% of the entire population, most of whom are male. (from http://www.colourblindawareness.org/colour-blindness/ )

ProfHacker included an article on Creating Color-Blind Accessible Figures recently.

There is tremendous variation in how individuals perceive and distinguish colors. These differences can be due to color vision deficiency or color blindness, as well as other medical conditions affecting the eyes or brain. Other factors such as device display settings, corrective lenses, and environmental lighting conditions can also affect the perception of color differences.


This article includes an interesting color-blind barrier-free pallette, which is worth taking a look at.

color-blind-palletefrom http://jfly.iam.u-tokyo.ac.jp/color/#cudo



Read Full Post »

Accessible Design” calls for design that includes the needs of people whose physical, mental, or environmental conditions limit their performance. “Universal Design” aims to extend standard design principles to include people of all ages and abilities, but remains at the level of generality, so it does not address all the specific needs of any particular disability.

But even for people who do not have any specific physical or mental characteristics that affect computer use, it has been found that adopting universal design principles can reduce fatigue, increase speed, decrease errors, and decrease learning time for all users. In many ways, universal design addresses the larger issues of usability by making things easier for everyone. from Usability First (opens in a new window).

Things to check in your course:

The one accessibility issue that is thought to be more important than all others is that a text equivalent is needed for every non-text element (audio, video, images, scanned documents). Fortunately, this is something that can be done.

Audio and visual content

Both audio and visual content, if used, are accompanied by a written, screen-reader compatible transcript and/or captioning in an ADA (Americans with Disabilities Act) compliant format.

    • If you are asking students to view YouTube videos, make sure that the video includes closed captioning. Many do include closed captioning. You should check the closed captioning against the video to make sure it is “correct.” Sometimes the closed captioning has been done by machines and not humans and so is not very useful. Here’s a brief description of how to use and create Closed Captions in YouTube (opens in a new window). Videos from TED Talks (opens in a new window) include closed captioning and transcripts.
    • How to create captions and subtitles on YouTube (opens in a new window)
    • If you are creating your own videos, then often the software you use to create the audio or video also allows for the creation of closed captions. For instance, Camtasia, a commonly used program, allows this. It’s best to follow the directions in your software.
    • Including a written transcript with all audio files is recommended. If you are creating the file yourself then it’s best to write out the transcript first and use that script when you create the audio file. When you include the audio file in your course, make sure you include the written transcript too.


Images use alternative text to describe their content.

    • For an image that conveys content, the alternative text succinctly describes the content conveyed by the element, without being too verbose (for simple objects) or too vague (for complex objects).
    • For images that have a function (images within links, image buttons, and image map areas) include alternative text which describes the associated function.
    • Complex graphics (graphs, charts, etc.) are accompanied by equivalent text, either through a description in the body of the page or a link to a description on a separate page.
    • Decorative graphics have null/empty alt values (alt="").

Scanned documents

Scanned documents, if used, have been processed (with Optical Character Recognition (OCR), tools) to provide a screen-readable version.

Course Links

Course links are self describing and meaningful.

    • The text display of hyperlinks is self-describing (i.e. URLs containing long strings of characters are replaced with meaningful descriptions.) Good link text should not be overly general; don’t use “click here.” Not only is this phrase device-dependent (it implies a pointing device) it says nothing about what is to be found if the link is followed. Instead of “click here”, link text should indicate the nature of the link target, as in “more information about sea lions” or “text-only version of this page”.

Screen Readability

Course ensures screen readability.

    • Color is not used as the only indicator of meaning.
      • An example of how color can indicate meaning is to show all required items in a list as red and all optional items as blue. In this example, it is fine to use color but not ONLY color. In addition to showing required items as red, also include some text, perhaps the word “required,” as part of the item. And, in like fashion, add the word “optional” to the blue items.
    • Text used can be interpreted by screen readers.
    • Text colors (if used) or colors of other critical visual elements are high-contrast.
      • It is estimated that 1 in 20 visitors to a website will have some form of color vision deficit. So it is important to make sure the contrast between background and foreground colors have high contrast. To test your page, try Color Blind Web Page Filter (opens in a new window)

For more information:

WebAIM Section 508 Checklist (opens in a new window)

About 15 standards are excerpted from Section 508 of the Rehabilitation Act, §1194.22. WebAIM, a project of Utah  State University, explains how these standards can be interpreted.

WCAG 2 at a Glance (opens in a new window)

Web Content Accessibility Guidelines (WCAG) developed in cooperation with individuals and organizations around the world, with a goal of proving a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

2010 ADA (Americans with Disabilities Act) Standards for Accessible Design (opens in a new window)

from the U.S. Department of Justice. This document is almost 300 pages long.

Web Accessibility Testing

” Any accessibility testing must be viewed as a process that combines automated software tools with human judgment. There is no tool that you can run against your website (or web page, for that matter) in order to assert that it is accessible and/or complies with the Section 508 provisions or the WCAG – no matter how much you are willing to pay ” from Web Accessibility – Web Standards and Regulatory Compliance by Jim Thatcher

Since both software tools and human judgement are needed, here are some resources for help with testing:

Validation Tools from the University of Wisconsin (opens in a new window)

W3C Accessibility Evaluation Resources (opens in new window)

Read Full Post »

Don’t rely on color alone.
Guideline 2 of Web Content Accessibility Guidelines (WCAG)

So, basically, if you decide you must create a link which is not underlined, then make sure you do not use color alone to indicate that it is a link.

A good site on accessibility is Dive Into Accessibility — 30 days to a more accessible web site. For good examples of this color-link concept see  Day 12: Using color safely.

Read Full Post »

Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.
Web Content Accessibility Guidelines (WCAG), section 1.4.1

1 in 12 people have some sort of color deficiency. When you’re designing for the web, this means that 1 in 12 people might not be able to see your site. http://www.iamcal.com/toys/colors/

Don’t convey information with color alone.

Color is often used to indicate special functions or status.  For example, required form fields are frequently indicated with particular color labels. Users with blindness, limited vision, or color-blindness may miss information presented with color.  Whenever color is used as an indicator, use a non-color-based indicator as well. For example, required form fields could be identified with an asterisk as well as a color.

Use contrasting foreground and background colors.

Web authors can set specific colors to be used for foregrounds (text) and backgrounds.  Sometimes images are used as backgrounds.  Be especially careful with this and do not use busy background images. Users with limited vision or color-blindness may have difficulty reading text that is similar in color to its background. For text, use dark colors on light backgrounds, or vice versa.  Avoid combinations of red and green as well.

Here are some links which you can use to check the colors and more on your web site:


This website provides examples of what web pages and/or images look like for individuals with different forms of color blindness.

Color Vision

This tool helps you simulate the appearance of a site’s colors for people with different color visions. It allows you to select text and background colors from a palette, then choose a color vision mode. Useful!


WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.

Cynthia Says

The HiSoftware Cynthia Says portal is a web content accessibility validation solution. It is designed to identify errors in your content related to Section 508 standards and/or the WCAG guidelines. This free tool meant for educational purposes, is an online test which only validates one page at a time.

Read Full Post »