Colour Contrast

2 February, 2007

As some may know, I'm in the process of redesigning this site, triggered in part because of the totally inaccessible manner in which it is displayed in IE7 (I would usually ignore that but it's one thing to not look too good, it's quite another to put the buttons in places that are unreachable). So, IE7 isn't all bad, it gave me something to investigate :). As part of the redesign I've been looking at ways of 'designing' my CSS files such that they can be easily edited and, as an added benefit, provides a means for user customization; in doing so I came across a problem.

Explaining the problem

The monitor I have at work is crap. It's old, it's small and it hurts my eyes unless I'm reading 20pt+ text from 2 meters away with frequent coffee breaks. Another of the reasons that I am redesigning my site is to ensure I can still read/work with it whilst using a low colour remote connection - I make almost constant use of Ctrl(+) whilst remote connected to aid readability; and on my own site the none-graphic alternate CSS. I'm not alone in my quest for unstrained eyes of course, there are vast numbers of people who, for varying reasons, need or want either larger screen text or higher contrast web content. As an example, I think it was Jippi that mentioned to me about Php throwdown, a wonderful idea (and I hope that the cake team do well with the Itemizr application that they managed to build in 24 hours - how many coffees is that!), and a site with a great fresh design. At the time i was on a remote connection and just clicked the link - it literally took me a couple of minutes to see that the comment section had a comment form. I wasn't actively looking for it, but whilst reading some comments it dawned on me that "name" was in a box with some text above it. I had to highlight the text to be able to read it - the difference between #555555 and #333333 (can you read that?) was barely visible.

The solution

There's no substitute for common sense and manually looking at the difference between two colours and checking if you can read it. In addition there areW3 accessibility recommendations regarding the difference in brightness and contrast between two colours. You can see how the W3 calculation works and test for yourself the numerical differences on the Snook Colour Contrast Check. No matter, putting common sense on the shelf, it is possible to entrust a digital mind to calculate (as a guideline) if the contrast and difference in brightness between two colours is sufficient to be able to read text/distinguish content. I searched around for a php class to do the simple calculations for me, but didn't find anything, I did find a few js implementations. Irgo: the colour manipulation class was born. There is unlikely to be anything new or incredibly groundbreaking in what I am presenting here, and I present it here for primarily for comment.

Below is my standalone (hex) colour manipulation class:

As I labored intensely :) adding documentation, I'll only say that it permits the possibility to determine brightness, contrast and derive a palette of shades of a colour (even a full palette from black to white through the original colour) from a passed hex colour code.

The use

Many sites, google groups for example, provide the possibility to use a standard template but change the colour scheme used. Other sites, dictionary.com for example, use the same principle to subtle distinguish between site sections whilst maintaining continuity. If a colour is derived or user customizable, it is quite possible to specify a colour scheme which is either difficult or impossible to read. By making use of the calculation defined in the w3 accessibility guidelines, it is possible to determine if the contrast between two colours is sufficient to allow reading and either warn the user or take steps to combat the problem (such as switching from a white to a black background). I'm still experimenting with my (php-ed) css files, but by specifying a single 'theme' colour it is possible to generate a palette of shades for use and, in addition, ensure that the text and backgrounds have sufficient contrast to be readable.

Wrapping Up

Provided here is a simple class which calculates the brightness of a colour; the contrast between two colours; the 'opposite' of a colour; or generates a colour palette (even with contrast restrictions). So, now all I need to do is decide on that one colour I want my site to be based upon... that green on Cheesecake's site looks a bit too similar, I wonder what the colour contrast value is :D.