I’ve been playing around with the Codeistry website’s colours, to improve the contrast and accessibility, whilst retaining the same feel.
The changes are subtle but move the site from mostly failing to almost completely passing the contrast and luminosity tests from JucyStudio.
It might seem obvious but going through this process brought home to me how much the perceived contrast of text depends on the background colour behind it. Text that looks fine on the normal page background might have insufficient contrast when used in a footer, link or menu – where the background colours are different.
The changes included changing the body text to use the old heading colour, using a slightly darker colour for headings and links, and a slightly lighter shade for the page footers, to increase the contrast with the footer text.
I actually think that this has helped the design too – not only for accessibility but it also feels stronger, with more impact and weight. I may even revisit this in the future and punch it up a bit more.
Colour contrast testing tools
http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php
Tags: accessibility, codeistry_website
