« « Website Accessibility and CSS

Website Accessibility and CSS (2)

website design

This is more a short checklist—rather than a hard and fast solution:

Check Color Contrasts

Take care to check the contrast of text against background colors. For users with any kind of visual impairment a low contrast between the text and the background can make the text very hard to read. You should also consider those users with color blindness who may find certain combinations of foreground and background colors difficult to distinguish.

WCAG 2.0 Success Criterion 1.4.3 requires that, in general, text and images of text should have a contrast ratio of at least 4.5:1. To help you assess whether your chosen colors will pass this ratio you can use the handy Luminosity Contrast Ratio Analyser written by Jez Lemon.

Backgrounds Should Only Be Decorative

It’s so easy to use background images in CSS that we can fall into the trap of using them everywhere. It’s worth remembering, however, that anyone who is unable to load images and/or CSS will be unaware the image exists at all if it is set as a background image.

This is acceptable if the image is purely for visual display, but if it’s important to the content it’s more appropriate to put the image inline with descriptive alt text; that way, users who are unable to see the image understand it’s there and what it represents.

Check line-height for Readability

Increasing the line-height used on your site can help readability—but take care here as very wide gaps between lines can also make it hard to read. A value between 1.2 and 1.6 should work well, and if you leave off the unit (for example, em or %) the line-height can scale correctly according to the text size.

For example, if the user has set their background color to black and foreground to white, and you then set the main text color to black, the text will seem to disappear! If you want users to be able to make their own choices as to colors then you should leave all colors unset and very few web designers would feel able to do that!

Related entries

Digg it StumbleUpon del.icio.us Google

Leave a reply

*

Sponsors