I’ll begin with the obligatory request for sensitivity…yes, I am getting to be an old fart and the sensory and motor systems are not quite that of a 20-something, a 30-something, or even a 40-something. I’m not quite over the hill, but I do have to wear glasses most of the time and I have been known to crank up the volume at times.
All that said, I understand that most of the folks who are developing websites and software applications these days are considerably younger than me and have near perfect sensory abilities. But what those people fail to realize is that they are not the majority and that there are a lot of consumers of technology today who are a lot more like me and a lot less like them.
My rant has less to do with the issue of size of fonts, links and buttons on web pages and particularly on apps on mobile devices – although these do annoy me to no end – but on the color themes that have become increasingly popular among the architects of today’s new look in technology.
We can perhaps blame Mr. Jobs and his geniuses at Apple for starting this – dare I say – “the graying of the web.” Sure, Apple aficionados would prefer I call it “silver,” but to me, it all looks like a lot of gray.
Gray is fine, l see a lot of it every time I look into the mirror, but combining gray on white is not a good combination when it comes to reading or viewing web content or applications. Add to this the penchant to now use a pastel variant of blue for links and highlights, and we have significant issues with visual perception.
This brooding came to a head when I recently updated to MS-Office 2013. Guess what…you got…lots of gray and white. Indeed, I was ready to ask for my money back but decided that there had to be a way to adjust all this paleness. Upon searching the web, I was surprised – and pleased – to see than many others had also been complaining about this and that there was at least a way to darken the gray – a little. BTW, see the comparison of Office 2010 and 2013 in the photo on this page and you can see what I am complaining about. You may need to click on the image to get an enlargement. Note, I did find the darker gray layout (not pictured here), but it is still lighter than the older version.
All this got me looking more critically at websites and the whole issue of contrast. According to international web accessibility standards adopted years ago, there needs to be a contrast ratio of 4.5:1 for normal text and 3:1 for large text for web pages to meet the standard (WCAG 2.0). BTW, some of the grays on Apple’s home page fall in at poor contrast ratio of 1.9:1.
For those who want to get serious about fixing contrast issues on their websites (application developers can also pay attention) there are some tools and some resources that can both measure and help fix the contrast issues.
One of my favorite plugins is something called the HTML_Codesniffer by Squiz. This little widget will quickly assess all accessibility issues on the web page you are viewing and give a list of Errors, Warnings and Notices. It has settings that allow you to assess the page based upon four different web standards including the three current levels of the W3C’s Web Content Accessibility Guidelines version 2.0 – affectionately known as WCAG2 (pronounced: “we-cag,” or “wic-ag” by some folks) – as well as the current – soon to be “refreshed” – Section 508 web accessibility guidelines from the US Access Board.
One of the cool features of the HTML_Codesniffer is that when you view the report and highlight the “issue” an arrow pops up showing you the location of the issue on the actual web page, describes the issue, and provides some idea on how to fix it. This can be particularly useful when you are tracking down issue within themes/template associated with content management systems.
If you are still in the development phase of building a website, you can easily compare color contrasts using a number of on-line tools. One that I like, located on the WebAIM website, the Color Contract Checker allows you to type in the colors’ hex numbers and it will calculate the contrast ratio. It will also show you what that combination of colors looks like as print on a web page. It can be very humbling.
Back to plugins: there are two testing tools that work nicely – the Juicy Studio Accessibility Toolbar (only available on Firefox) and the ColorZilla. These two tools work in different ways, but each provide a variety of help to the developer when looking at color issues.
In closing, please note that there is a lot more to making your website more accessible that simply watching out for color contrast (I have not even mentioned the whole issue of folks with color blindness and those with low vision). But the issue of good color contrast on web sites is perhaps the most often overlooked element of accessibility. And, since poor color contrast can affect many people, not just those with disabilities, it is really a usability issue that needs careful consideration.
I will add that I have found “issues” with some of the websites I have developed….I’m working on it.
PS: Hey, apparently I am not the first – or only – person to whine about this. If you agree with me, you can “Join the Contrast Rebellion!” I rest my case.
Resources for the serious:
Here are some older article about the topic that is worth taking a look at:
- The Principles of Good Web Design Part 3: Colour.
- 10 colour contrast checking tools to improve the accessibility of your design.
- Using Light, Color and Contrast Effectively in UI Design.
- Color and Usability.
- Tin Hat – Colours and contrast.
- Select contrasting colors for greatest legibility.
Some more recent ones too