Graphics can be of great benefit to the accessibility of a Web page by providing
Illustrations
Icons
Animations
other visual cues that aid comprehension for sighted individuals
When designing for people with disabilities too often we forget that we are not designing only for the blind. We must consider disabilities of all types. Graphics can be useful especially to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.
Basic Rules
Do not use color alone to convey meaning
Choose contrast so that text is easily distinguishable from the background
Communicate the purpose of the graphic (not its appearance) through meaningful alternative text
When graphics require complex descriptions use the longdesc attribute, a link to an alternative page, a description in the context itself, or a “D” link
Use empty alt text for decorative, transparent, spacer, and redundant images
Try to limit the amount of text in graphics
Do not use effects that flicker or produce a strobe-like effect
Use images as backgrounds only if they do not convey important content (since it is impossible to add alt text to background images)
Ensure that all information conveyed with color is also available without color
2.1
c
Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Until user agents allow users to control flickering, avoid causing the screen to flicker
7.1
j
n/a
Provide text equivalent for Images, graphical or animated buttons, spacers, bullets
1.1
a
<FORM action=”…” method=”post”>
<INPUT type=”button” alt=”Click this button to verify form” value=”Verify” onclick=”verify()”>
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen
It is essential that users can find, identify, and comprehend hypertext links quickly. Even though there are no Level 1 (A) checkpoints associated with links it is pretty easy to fulfill Level 2 and even Level 3. It’s definitely worthwhile the little effort with the added benefit that e.g. most browsers render the title attribute as a tooltip.
People rarely read Web pages, they scan the page! As a result, Web pages have to follow Design Guidelines for Content that enable them to quickly identify headings, titles, links and other important elements to orient themselves. What else has to be done to be Section 508 compliant?
Basic Rules
Don’t rely on color alone
Identify the language used throughout the document and identify changes
Use correct markup to emphasize important content
Be clear and precise in the choice of wording and language
Ensure that all information conveyed with color is also available without color
2.1
(c)
Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Language
Clearly identify changes in the natural language of a document’s text and any text equivalents
4.1
n/a
And with a certain <SPAN lang=”fr”>je ne sais quoi</SPAN>,
she entered both the room, and his life, forever. <Q>My name
is Natasha,</Q> she said. <Q lang=”it”>Piacere,</Q>
he replied in impeccable Italian, locking the door.
Language
Use the clearest and simplest language appropriate for a site’s content
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen
“If links were married they’d get divorced all the time! That’s because they can’t keep their promise.” (Gerry McGovern)
What Gerry means is that what links say they will do and what they actually do are total opposites. How many times have I believed, clicked and followed a link that promised me to ‘Download this or that’ just to find another page describing this piece of software. There I had to muddle through even more links just to find another ‘Download version’ link that yet again takes me to another page acknowledging the terms and conditions. The story could go on and on.
Remember: Good links are like magnets – they drive users to them.
With that in mind, here are the
Design Guidelines for Links
Color and underline link text (exceptions include lists of links like a navigation menu)
Reserve underlining for links (do not underline text that is not a link)
Use different colors for visited and unvisited links (e.g. shades of blue)
Avoid using color for text unless it is a link and never use blue for non-text links (even if your links are not blue)
Avoid changing the font style on mouse over
Avoid tiny text for links
Use appropriate spacing between links or use a clear separator
Use links primarily for navigation between pages
Link text must be describe the target as short and precise (clear call to action) as possible AND hold this promise!
A palette is a complete set of colors one should adhere to when designing a website. This includes a color scheme (typically 2, 3 or 4 colors) plus some additional colors to work with. The goal along the design process is to stick to these colors without the need of inventing and introducing new ones.
Here are some tools and knowledge on how to design and create an effective and appealing color palette for you website in just minutes:
Know your primary color
Many times you will be constraint by your clients’ need for a primary color, be it because of the logo, corporate identity (CI) or corporate design (CD) guidelines. Consider yourself lucky!
For the other times when you have to come up with a color for yourself, think of what best represents the company’s target audience – young, fashion, pop, serious, technocratic, playful. All that will determine your ultimate choice. The best description I’ve found so far of what different colors actually stand for is in Jason Beaird’s book ‘The Principles of Beautiful Web Design’. Even though I’m sure you find tons of other sources on the web be aware of easy color-meaning mappings like black=death – in web design black is also a color that conveys power, think of tuxedos, limosines, Batman etc.
Create a Color Scheme
I’ve found the Red-Yellow-Blue color wheel the closest to traditional color theory and that’s what I am using and writing about now. I acknowledge the CMYK (Cyan-Magenta-Yellow-Black) color wheel but found it less useful for my purposes (feel free to convince me otherwise )
I highly recommend the WellStyled Color Scheme Generator 2 (http://www.wellstyled.com/tools/colorscheme2/index-en.html). It allows you to use your primary color and your knowledge about your target audience to play around and find the most suitable of the five classic color schemes:
monochromatic (your primary color in different tints or shades)
analogous (your primary color plus two colors next to it on the wheel)
complementary (=contrast; your primary color plus the opposite color on the wheel)
triadic (three colors equally separated on the wheel)
tetradic (basically two complementary schemes combined)
The Color Scheme Generator will calculate the correct RGB values in hexadecimal notation for you and even offer variations (pastel, contrast, pale) to further experiment. Once done, simply print or note the colors and values computed and you are ready to roll.
Ensure good Contrast
Contrast is not only a good design principle but also an Accessibility requirement for many websites (W3C, Section 508 in the US). So before you make your final choice on the color scheme ensure that your main color provides sufficient contrast to background/foreground colors.
Test your colors using Colour Contrast Check (http://www.snook.ca/technical/colour_contrast/colour.html) making sure the brightness difference is greater 124 and the color difference is not less than 500!
Finalize your Color Palette
To finalize your color palette all you need to determine is which other tints and shades of the existing (as determined above) color scheme you want to use – black and white included.
As a basic rule try not to ‘overload’ your page with the amount of colors used, but certainly a number of 5 or 6 seems to be about right (remember to count black and white).
Done, wasn’t that easy?
Here are some interesting links I recommend together with an excellent book:
The following 8 images were taken from 
