The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P15:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | Accessibility and Alternative Devices 257 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 Success Criterion requires that in general text and images of text should have a contrast ratio of at least 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 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 and 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. How do I test my site in a text-only browser Checking your site using a text-only browser is an excellent way to find out how accessible it really is. If you find it easy to navigate your site using a text-only browser it s likely that visitors using screen readers will too. 1 http TR 2008 REC-WCAG20-20081211 visual-audio-contrast-contrast 2 http services .
