High Contrast Stylesheets

Make Your Website Accessible to Vision Impaired Users with a High Contrast Stylesheet

Glasses

Image by Elvire.R

Is your site acces­si­ble, not only to the blind, but also to the vision impaired?

If not, why not, and how do you go about mak­ing it accessible?

Many web­sites have text set to a small font size, some­times with a low con­trast against the back­ground (as can be seen on this very web­site). This can make it hard for some­one with visual impair­ments to use a site.

Then there are the issues that come when some­one mag­ni­fies their screen to see things more clearly. If your site has mul­ti­ple columns, as many do, then this can cause prob­lems, as they will have to scroll hor­i­zon­tally just to see all the con­tent (mean­ing that con­tent has a high chance of not even being seen).

Implementation

The fol­low­ing will use PHP. Although Javascript can be used, it is prefer­able to use a server side lan­guage such as PHP, as some peo­ple browse the inter­net with Javascript either turned off or sim­ply not sup­ported. PHP, as well as other server side lan­guages, do not rely on the users brows­ing environment.

Head Section

Start by adding adding a check for a spe­cific cookie in the head of the doc­u­ment. If the cookie is present, then the zoom stylesheet will be used, oth­er­wise the nor­mal styles will be used instead:


<?php if ( isset($_COOKIE['style']) && ($_COOKIE['style'] == "zoom") ) : ?>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/zoom.css" type="text/css" media="all" />
<?php else : ?>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" type="text/css" media="all" />
<?php endif; ?>

Links

Now add the link to the alter­nate ver­sion some­where on the page, prefer­ably near the top:


<span id="acc">
	<?php if ( isset($_COOKIE['style']) && ($_COOKIE['style'] == "zoom") ) : ?>
    		<a href="<?php bloginfo('template_url'); ?>/switcher.php?style=normal">Normal Style</a> | 
	<?php else : ?>
		<a href="<?php bloginfo('template_url'); ?>/switcher.php?style=zoom">High Contrast</a> | 					
	<?php endif; ?>
        <a href="#content">Skip To Main Content</a>
</span>

In the above, the high con­trast link will be shown unless the page is already being viewed in high con­trast mode. If that is the case, a link to return to the nor­mal style will appear instead. I have also included a link to skip past the nav­i­ga­tion and to the pri­mary con­tent, a stan­dard acces­si­bil­ity mea­sure for peo­ple using screen readers.

When the link is clicked, the user will (trans­par­ently) be taken to a page called switcher.php, along with a vari­able onto the end which will deter­min the cookie to be set.

PHP Switcher File

In switcher.php, add the following:


<?php 
$theStyle = $_GET["style"];
setcookie("style", $theStyle, time()+31622400, "/", ""); 
header("Location: ".$_SERVER["HTTP_REFERER"]);
exit; 
?>

This will get the vari­able men­tioned above, set a cookie called style based on that vari­able, and then return the user back to the page they were on.

Stylesheet

With the above con­di­tion in the head of the doc­u­ment, all the nor­mal styles are gone, and all new styles can now be given in order make things eas­ier for peo­ple with low vision.

The fol­low­ing styles should be used:

A sin­gle, fluid col­umn
Plenty of white­space
A large, sans-serif text with a greater line height for max­i­mum leg­i­bil­ity
Light text on a dark background

Here are some exam­ple styles:


body {
font: 130%/1.7 Verdana, Helvetica, Arial, sans-serif;
color: #fff;
background: #333
}

#header, #content, #sidebar {
padding-bottom: 30px;
border-bottom: 5px solid #fff
}

#contact-name, #contact-email, #contact-subject {
display: block;
margin: 10px 0;
}

form, table {
margin: 1em 0 2em
}


form * {
font-size: 100%
}

a {
text-decoration: none;
border-bottom: 2px solid #fff;
padding: 2px;
font-weight: bold;
color: #ff0
} 

a:hover {
background: #ff0;
color: #000
}

h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0;
color: #6f6
}

h1 {
font-size: 250%
}

h2, #title-single h1 {
font-size: 180%
}

h3 {
font-size: 130%
}

h4 {
font-size: 120%
}

h5 {
font-size: 110%
}

h6 {
font-size: 105%
}

p {
margin: 0 0 2em
}

Resources

Big, Stark & Chunky — A List Apart
List of other links from Joe Clark

Conclusion

With just a few small changes, you are able to improve the acces­si­bil­ity of your site for the vision impaired.

To see the results of the above style changes, try out the high con­trast link at the top of the site.



3 people have left a comment

It would be much more use­ful to those of us with vision prob­lems if you would sim­ply pro­vide a stylesheet with a 16pt font, black back­ground, white fore­ground, yel­low links and green vis­ited links. I’m really not seek­ing lessons in css, but every­one wants to give me lessons rather than pro­vid­ing stylesheets that are imme­di­ately use­ful. At this point I find it ironic that a mul­ti­tude of web­sites for the visu­ally impaired are not eas­ily read­able by the visu­ally impaired.

If you have a very basic stylesheet that you can send me, I can just load it in the rekonq (kde) browser and I will be good to go.

Excuse me for being rude, but Im a bit frus­trated at this point.

Sincerely,
jeffo


To see the results of the above style changes, try out the high con­trast link at the top of the site. ”

???

Where is this link .. ??

I am a sighted user and I can not see it ..


    Yes, that is a bit ironic that this site itself doesn’t have a high con­trast mode, but this post was writ­ten almost 5 years ago, and since then I have redesigned it with­out includ­ing that link.



Leave a Reply

* Required





You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <q cite=""> <strong> <sub> <sup>