High Contrast Design
Posted on Friday, September 1st, 2006
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.
If you enjoyed this post, why not subscribe to Unintentionally Blank
1September 3rd, 2006 at 6:39 am
Yvonne Says:Whoa … very impressive Phil. The yellow on black is surprisingly easy to read!
2September 3rd, 2006 at 6:07 pm
Phil Says:Thanks Yvonne. It’s not that I’m expecting hundreds of visually challenged users to visit this site, just hoping that I can set a good example and show people how easy it is to make a site accesible too.
At least yellow on black is easier to read than light blue on white as well!
3September 4th, 2006 at 1:51 am
Yvonne Says:You know Phil, you might want to think about making your main content’s font size a tad bigger. I did that after a month or so of blogging after one of my reader’s finally sent me an email to complain :P
4September 4th, 2006 at 9:32 am
Phil Says:Hmmm… how big are you seeing my font? It looks the same size as you already use on nektros. It should be the equivalent of 12px high (though set in ems so that it can be resized).
5August 31st, 2009 at 2:40 pm
Canavar Says:Hi,
i can not see the css dropdown in the top right corner.
i’m using firefox
help!
Canavar