While browsing the web this morning, with a million tabs (as usual), I stumbled upon a local council website that would easily fail most accessibility checks. I started wondering how many of these sites I had open would realistically pass accessibility tests, so I did some quickie contrast tests. Surprising absolutely nobody, only one passed the contrast test. For those that are interested, here are the results.
Why does this matter?
Contrast and the use of colour are vital to having an accessible website. If users can’t see your website, they can’t use your website. Sure, people with severe visual impairments would likely be using screen readers, but what about users with slight glaucoma, color blindness, cataracts, or Macular Degeneration? There are millions of people with vision impairments that aren’t severe enough to warrant using assistive technologies. These are the people that contrast requirements aim to help.
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
WebAIM
Obviously I’m not posting URLs or saying who owns these sites (I’m a nerd, not a jerk), but if you recognise your colour scheme maybe take some time to do a review yourself 😉
Site 1
Good contrast across the board. Had some text over images, but even they had good contrast as the images were pretty dark. Two thumbs up! Now you just gotta work on the alt text and keyboard navigation, cos when tabbing through your site I had no idea where I was!
Site 2
Seriously, I have good vision and this hurts my eyes trying to read it. Even at large sizes this blue text fails. 1 star. Full disclosure: This was the site that prompted this post. This is a council website, what were you thinking?
Site 3
I was going to say this one was mostly good except for the few cases of the green and grey, but on reflection there was a lot of green on white and white on green. In some cases there was even green on green, that was an odd one.
Site 4
Most of the site is good, but the use of the blue background with white text trips this one up.
Site 5
Most of this site is fine for colour contrast, but then there’s random bits using the different colour scheme that gets in the way. It would legitimately take 5 – 10 seconds to fix this one 😉 Just flip the white text to black and you’re done, son!
Obviously the tests I ran are only a small part of gauging website accessibility. Alt text, keyboard navigation, and a variety of other standards need to be met. If you want to talk about how accessible your website is, get in touch.
Leave a Reply