you are here: tetridia Home > Resources > Usability

Legibility

The following basic guidelines can help a designer improve a web-site's legibility:

Colour Combinations

Figure: Readability Of Websites With Various Color Combinations

The diagram "Readability Of Websites With Various Color Combinations" demonstrates the effect of contrasting colours on the readability of text on screen. Especially dark colours on light background allow easy reading on computer screens, whereby maximum readability can be achieved by using black text on white background. The more the colours use the same shade or brightness, the harder they are to read. This is especially true for any colour-variations in terms of their respective grey-tones.

Figure: Background colour and font colour are too similar
(URL: http://svg.fh-augsburg.de/archiv/index.html)


Figure: Web site in their respective grey-tones

Inverted colours, dark background and light text are often used and cause only a slight delay to the user viewing her screen while her eyes adjust to them. In contrast, colour combinations with similar grey-tones (e.g. pink or red and green) can cause longer delays, as the user's eye needs more time to adjust. Colour-blind people have even more problems viewing such colours, which is why developers should avoid eye-unfriendly colour combinations completely.

Font Characteristics

Long text passages in capitals pose particular problems to readability, as the form and familiar characteristics like the typeface of single words are lost.
Font sizes should be chosen carefully. Text should be large enough to be easily readable even for visually impaired or elderly visitors. This makes the user feel comfortable and encourages her to browse the content and site and is also compliant with general usability guidelines.
Besides the font size, the font type also plays a big role for readable content, especially when using small fonts. Traditional print media use resolutions of at least 300dpi, whereas computer monitors normally display only 72dpi, which is insufficient for small or very detailed fonts like serif fonts.

Background Pictures

A commonly used way to add graphic design elements to a Web page is the integration of background pictures. Developers should keep in mind that a background picture can slow down the reader and strain her eyes, especially when parts of the picture cross text content boundaries. Animated elements or text should also be used with care as they can have similar adverse effects on usability, distracting the user's attention from the main content and compromising her concentration on the page's relevant content.