One Line Colour and Text Size Accessibility Module

One Line Colour and Text Size Accessibility Module
Accessibility Module In Action
Accessibility Module In Action

Many users find it difficult to read black text on a plain white background, or indeed in other combinations. By changing the background colour and text size, they can enjoy an easier online experience.

While working at Tayside Police on my Summer Work Placement as a Student Intern, I have taken it on myself to improve the accessibility options of their website, in doing so, I have written a javascript that allows the user to change the page style and increases the text size of the site.

The script works by changing the ID or the text size attributes of the page body and storing this in a cookie on the clients browser. This way, the user’s options are reflected across the site, where ever the module is included and not just the page they selected it on.

Ok, the title may be a little deceptive, while you only need to insert one line of code to insert the module and get the text size options to work, you will need to type several lines of CSS into your spreadsheet, something that any good web designer will have no difficulty with.

The module requires you to add CSS Style IDs for the following five options which will be applied to the body tag of your page: whiteOnBlack, yellowOnBlack, blackOnYellow, blackOnPink.

This could be as simple as creating an ID for each one and specifying the text and background colours however, you’re likely to find that some elements of your page will require a little more tweaking. For instance, for this site, I also had to specify colours for links and to create different background images to fit in with the new themes.

[code lang=”css”]
#whiteOnBlack {background-color:#000000; background-image:url(images/Side-Banner-Inverse.png); color:#ffffff;}
#whiteOnBlack #twitter_feed {list-style-image:url(twitter-inverse.gif)};
#whiteOnBlack a {color:#ffffff;}
#whiteOnBlack a:link {color:#ffffff;}
#whiteOnBlack a:visited {color:#ffffff;}
#whiteOnBlack a:hover {color:#919396;}
#whiteOnBlack a:active {color:#ffffff;}
#whiteOnBlack a:visited:hover {color:#919396;}

#yellowOnBlack {background-color:#000000; background-image:url(images/Side-Banner-Inverse.png); color:#ffff66;}
#yellowOnBlack #twitter_feed {list-style-image:url(twitter-inverse.gif)};
#yellowOnBlack a {color:#FFFF00;}
#yellowOnBlack a:link {color:#ffff66;}
#yellowOnBlack a:visited {color:#ffff66;}
#yellowOnBlack a:hover {color:#FFFF00;}
#yellowOnBlack a:active {color:#ffff66;}
#yellowOnBlack a:visited:hover {color:#ffff00;}

#blackOnYellow {background-color:#FFFF66; background-image:url(images/Side-Banner-Transparent.png);}

#blackOnPink {background-color:#ffdddd; background-image:url(images/Side-Banner-Transparent.png);}

In the case of the much more complex Tayside Police site, nearly 100 lines of CSS were required for each colour scheme.

One thing to remember is that absolute text sizes cannot be changed by the module, so if you’re wanting a text size to change properly, make sure you specify it’s normal size in your css as em or percentages, not at points or pixel sizes. That said, this can work to your benefit. I didn’t want the module to change the large title text at the top of my site so I’ve set these with absolute pixel values.

Once you’ve created your new styles, download the package linked below, which includes the script as well as the images for the buttons, then all you need to do is insert the one line below to add the javascript to the pages where ever you want it to appear.

[code lang=”html”]


Good luck and please comment if you’ve used this script, I’d love to hear how it’s being used.

Click to download accessibility module.

Published byapbarratt

I own this here website, bow down before your God!