Unintentionally Blank

Phil Nash on the Internet, Web Standards and Accessibility

High Contrast Design

Sep 01, 2006

by Phil Nash

Accessibility is not just about blind users who use screenreading software to hear websites. More than a year and a half ago Joe Clark wrote an article for A List Apart under the name Big, Stark and Chunky. It brought to light a different group of web users that need to be considered when making your site accessible. There are groups of users who aren't blind, but do have visual impairments, they don't use screenreaders, instead tend to increase the text size on websites or use magnifiers to view the web. Joe's article goes on to describe how a site should be designed to accomodate these users and how CSS can help. Light on dark text, single columns, simple navigation and large fonts are the keys to the design we need.

In order to increase awareness of these techniques (and show off my own style sheet switcher) I tore apart my site's design today in order to come up with a high contrast design that would be more accessible for visually impaired users. You can view the vastly different design by selecting "High Contrast" from the dropdown menu at the top right of this page (unless you don't have javascript enabled).

Look out for more new designs appearing in the design menu when I get around to blowing the dust off my copy of Fireworks and making some pretty backgrounds. For now though, appreciate that if your site uses dark, 10 pixel high text on a light background, some users will not be able to read it. Consider an alternative stylesheet, it's not that hard and it will give more people chance to see what you have to say.

One final point, due to my entirely standards based site, I only had to create a new style sheet and give it a link in the head element of my page. The mark up did not change at all, another bonus for web standards.

Unintentionally Blank is Phil Nash's thoughts on web development from 2006-2008. Any code or opinions may be out of date.