usability.codegraffiti.com

Colour is your friend but also one of your biggest enemies. Colour is used for branding, to make things look pretty and to emphasize items on the page, but when used excessively, it has the reverse effect.

Not all users have perfect eyesight, so may rely on transforming the content on the page to a larger font, altering the colour scheme to provide better contrast or the content may not be presented in visual form at all. This affects our style choices through contrasting colours and clear fonts and our back-end programming through the supply of text alternatives for visual content.

Colour blindness

8% of men have some sort of colour blindness.

That’s 1 in 12 of your male visitors and there is a range of different conditions they might have. The most common is red-green colour blindness, affecting 1 in 20 males, where red and green colours are hard to distinguish from one another. Other conditions make thin lines of colour hard to distinguish or create problems when looking at coloured patterns.

This issues is quite complex, so rather than cover it again here, I recommend that you check out the Wikipedia page for a general overview and colorschemedesigner.com provides an awesome tool that displays how a user with any form of colour blindness will see your page.

Never rely on colour to pass contextual information to the user.

Given all of the different conditions and the difficulties involved in testing each one, the best solution is to assume that no colours on your page will be seen as your intended. For example, to highlight an error or a discounted price, do not simply colour the text in red and assume that is enough to draw attention. Instead, consider different font styles, explicit notes and physical markings such as asterisks to pass this information to the user.

The main navigation and content areas are the most important areas to consider when selecting colours. Choose a background colour and a font colour that contrast well, preferably using dark text on a light background, so the text remains clear and does not strain your visitors vision in order to read.

Provide text equivalents

Using pictures and graphics in your website design can assist in accessibility by emphasising certain elements and drawing the user’s focus to important content. There are technical and accessibility reasons that your images will not be viewable in the form you intended, the user may opt to turn them off completely.

All content must be available in a textual form

If a partially sighted user cannot read the text in your images, due to font size or contrast, they may switch images off completely and read the alternative text instead. Blind users use screen readers to transform the written text into audio; this of course cannot be done for images.

You should also supply transcripts for audio feeds, captions for video content and descriptions of graphs. By making all of our content available in a textual format, we allow the user to choose any user agent they like to transform it into a form comfortable to them.

Transformable text

It is a poor assumption that users with specialised tools for accessing the web do not care about the style of your website. Whilst not a high priority, if you can present the user with the same colour scheme, layout and decoration no matter what tools they use, then why not?

The biggest culprit here is the use of images for page headings and titles, where a pretty font is considered better than usable design. Resizing images is supported by some browsers, performed by stretching the images to the new size, possibly with some algorithmic blurring to removed the jagged edges. Even so, the result is not pretty, destroying the effect you were trying to achieve when you built your text as an image.

Supply your headings as text so it can be enlarged or translated without destroyed your style.

When text is resized, the browser and operating system create a new rendering of the text with the correct aliasing and letter spacing, allowing it to look smooth and readable at any size. Whilst the size of the text may break some styling, the end result will look nicer overall and be much more readable to the user.

Another accessibility target is towards foreign users, those who are not fluent in your chosen language and wish to translate the content to their own dialect. Google Translate provides an excellent service for this, but it cannot translate images. Whilst it can style alternate text, the user will have to turn off images in order to read it or use their mouse to hover over the images themselves. This becomes either a style or usability issue, respectively.