Color Blindness and Web Design
Most Web designers are used to having a palette of millions of colors to choose from when designing a Web page.
And just because you want your page to be accessible to color blind people doesn't mean that you have to limit that palette.
All you have to do is think about the color combinations that you use.
If you're using colors to make distinctions, you should be aware that red and green can be hard for a color blind person to tell apart.
Red and green are often used to indicate "stop" and "go" in US culture. However, if you use them in that way on your
Web page, your purpose would be completely lost on a color blind person.
Here are some tips to make sure your pages are color blind friendly:
- Don't use only color to indicate something specific on your page.
- For example, if you have a form with required fields, making the text red might not be a big enough distinction for a color blind person. Add another cue, such as an icon or other element to indicate that the field is required.
- Desaturate your images to see if they still have impact.
- Desaturating the images removes all the color from the image. While this is not how most color blind people see the images, it will give you a quick and easy way to tell if the image is still useful. Maps are particularly difficult, as the red lines for "freeways" might look identical to the green lines for "dirt roads".
- Try to avoid placing red and green together.
- Especially on items like navigation buttons, the text can actually blend into the background, making it very hard to read.
- If you can, find a color blind friend or relative to look at your site.
- If you're not color blind it's often very difficult to tell what they might have trouble with. The challenge is that if they can't see something, they might not even know they aren't seeing it.
- Choose your colors with awareness.
- It's perfectly fine to make a design choice that negatively impacts color blind people, but do it deliberately. And preferably, come up with an alternative for them as well.
Dyslexics need clear Graphics and Distortion-free Text
Dyslexic individuals, who are reading your site on their own, will appreciate clear, simple, and consistent graphic navigational icons.
They will be troubled by flashing text, variations in fonts, distracting sounds or animations, and textured or patterned backgrounds.
- Keep paragraphs short, and use a small amount of text on each page. If a long article is posted, create a topic index at the beginning,
so that the dyslexic reader can quickly narrow in on the parts that interest him or her.
- Use default font settings or provide a way for users to choose their own styles. That way, a user can choose their own preferred
font with their browser, or create their own style sheet. Many dyslexics find they read best with one particular font.
- Keep your main text left-justified. It is very hard to read paragraphs where all lines are centered or which are right-justified.
- Use a consistent layout and format throughout the site. It helps to have navigation aids laid out consistently on every page.
- If you use frames, be sure to provide a no-frames alternative; some text-to-speech software cannot read text on framed pages.
- Make a list of relevant links at the end of a paragraph or section, rather than merely placing the links within the body of the text.
That way the user can find the important links without needing to read all the text. Be sure to clearly describe the type of information or site the link will lead to.
- Use small icons to help with navigation between frequently used web pages. There should also be a text alternative for navigation (or the 'alt' tag should be used), for those individuals who rely on computers to read the page contents to them.
- Never use flashing text. Do not use animated or moving graphics unless the animation is necessary to illustrate important information, such as an animation demonstrating how a machine works. Even so, it is best to place the animation on a different page, or to set it up to start only when clicked.
- Avoid using background images behind text. Make sure that there is a good contrast between the color of the background and the color of text.
- Do not set up background music to play, unless the site gives the user a choice whether to turn it on.
- Sites that are designed to be easy for dyslexics are also easy for others to use and navigate. Market research shows that most people find it harder to read on a computer screen than from printed sources, so many non-dyslexic people will appreciate the dyslexic-friendly format.
Website Design for Dyslexics & Color Blindness
Website design must consider all the above factors together with the following points. Research shows that readers
access text at a 25% slower rate on a computer. This should be taken into account when putting information on the web.
When a website is completed, check the site and information for accessibility by carrying out these simple checks.
- Navigation should be easy. A site map is helpful.
- Use graphics, images, and pictures to break up text, while bearing in mind that graphics and tables may take a long time to download.
- Very large graphics make pages harder to read.
- Offer alternate download pages in a text reader friendly style.
- Where possible design web pages which can be downloaded and read off-line.
- Moving text creates problems for people with visual difficulties. Text reading software is unable to read moving text.
- Contents links should show which pages have been accessed.
- Most users prefer dark print on a pale background. Color preferences vary.
- Some websites offer a choice of background colors.
- Encourage the use of hyperlinks at the end of sentences.
- Avoid green and red/pink as these are difficult for color-blind individuals.
- Make sure that it is possible for users to set their own choice of font style and size, background and print colors.
- Use a plain, evenly spaced sans serif font such as Arial and Comic Sans. Alternatives include Verdana, Tahoma, Century Gothic, Trebuchet.
- Font size should be 12-14 point. Some dyslexic readers may request a larger font.
- Use dark colored text on a light (not white) background.
- Avoid green and red/pink as these are difficult for color-blind individuals.
Headings and Emphasis
- Avoid underlining and italics: these tend to make the text appear to run together. Use bold instead.
- AVOID TEXT IN BLOCK CAPITALS: this is much harder to read.
- For Headings, use larger font size in bold, lower case.
- Boxes and borders can be used for effective emphasis.
- Use left-justified with ragged right edge.
- Avoid narrow columns (as used in newspapers).
- Lines should not be too long: 60 to70 characters.
- Avoid cramping material and using long, dense paragraphs: space it out.
- Line spacing of 1.5 is preferable.
- Avoid starting a sentence at the end of a line.
- Use bullet points and numbering rather than continuous prose.
- Use short, simple sentences in a direct style.
- Give instructions clearly. Avoid long sentences of explanation.
- Use active rather than passive voice.
- Avoid double negatives.
- Be concise.
- Flow charts are ideal for explaining procedures.
- Pictograms and graphics help to locate information.
- Lists of 'do's and 'don'ts' are more useful than continuous text to highlight aspects of good practice.
- Avoid abbreviations if possible or provide a glossary of abbreviations and jargon.
- For long documents include a contents page at the beginning and an index at end.
Checking ReadabilityTo set your spell checker in Word 2003 to automatically check readability, go to Tools, Options, Spelling, and Grammar, then tick the Readability request. Word will then show your readability score every time you spell check.
In Word 2007 and later versions, Click the Microsoft Office Button, and then click Word Options. Click Proofing. Make sure Check
grammar with spelling is selected. Under When correcting grammar in Word, select the Show readability statistics check box.
Check long documents in sections, so that you know which parts are too hard.
- Flesch Reading Ease score: Rates text on a 100-point scale; the higher the score, the easier it is to understand the document. For most standard documents, aim for a score of approximately 70 to 80.
- Flesch-Kincaid Grade Level score: Rates text on a U.S. grade-school level. For example, a score of 5.0 means that a fifth grader, i.e. a Year 6, average 10 year old, can understand the document. For most standard documents, aim for a score of approximately 5.0, by using short sentences, not by dumbing down vocabulary.
Further information on Web Design and adaptation:
Distilled design of B.D.A. web:
RNIB Web Access Centre:http://www.rnib.org.uk/professionals/webaccessibility/Pages/web_accessibility.aspx
BBC: My web, my way. Making the web easier to use:http://www.bbc.co.uk/accessibility/guides/allguides_index.shtml
For more detailed information and discussion on fonts, see the BDA New Technologies Committee website: