jebswebs

accessible and universal web design, development, and consultation

Learn More

What’s with all the gray?

ABC in a blue box[I’ll start out with a warning – this is a bit of rant.]

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.

screenshots of MS Word showing poor contrast

Office 2013 (left) vs Office 2010 color layout.

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:

Some more recent ones too

 

  7 comments for “What’s with all the gray?

  1. July 31, 2013 at 6:44 am

    Hi,

    you might love this link too : http://openweb.eu.org/articles/text-contrasts (about good web contrasts) 😉

    Constrastly-yours,
    Nicolas

  2. Mau
    July 31, 2013 at 2:06 pm

    It all makes sense… sort of…

    Why the hate towards Jobs and “his Geniuses”? How did they start “the graying of the web” exactly?

    Not to bash, but:
    – your site’s body background sits at #f1f1f1 while Apple’s website sits at: #f2f2f2.
    – Your content’s container background sits at #fff. Just like Apple’s.
    – Your core content text color: is at #333, Apple’s? #333

    I’m confused.

  3. Christophe
    August 1, 2013 at 3:50 am

    Also check the Contrast Analyser for Windows and Mac by the Paciello Group: http://www.paciellogroup.com/resources/contrastAnalyser. You can select foreground and background colours from anywhere on the desktop by means of a pipette, so you can evaluate desktop applications (and their content) as well as web pages. It uses WCAG 2.0’s colour contrast algorithm and can also display simulations of protanopia, deuteranopia and tritanopia. I’m still waiting for a similar tool that runs on Linux …

  4. August 1, 2013 at 9:20 am

    No disrespect to Mr. Jobs from me. But I do seem to recall Apple was the first to use lots of gray in their web presence. I have no problem with gray, but when you put gray text on top of a white background, I have a problem. I will take a look at the contrast of my sites (I am always tinkering with this) and (will attempt to) practice what I preach.

    Thank you for reading my blog.

  5. Cliff Tyllick
    August 4, 2013 at 8:01 pm

    John, another tool to consider is contrast-a.dasplankton.com. I especially like it for discussions about selecting palettes.

  6. August 6, 2013 at 10:19 am

    Very nice. Thanks Cliff!

    Thank you for your comment.

    ~j

  7. October 3, 2014 at 4:44 pm

    I know that sometimes a blogger or someone posting on a website is not responsible for the textual graying that is so prevalent. However, when I see gray text on an off-white background I’m unavoidable impressed with it’s stupid appearance. I don’t think it has anything to do with aesthetics and my sight is good enough. It just looks like there isn’t anything but a me-too ethos that finds comfort in abject conformity. Of all the possible things to rant about I know some would suggest that we get a life and deal with something important. Yes, it’s on the cusp of the trivial as only a quasitangible metaphor for the many trend followers that quasi-instinctually mingle in the quasihiveherd.

    Could it be that we have stumbled upon a sort of icon for what has become of important elements of our culture? Indefinite, ambiguous and lacking contrast, difficult to read, out of focus and vague. It’s queasy banality even reflects the banality of traumatic levels of simulated and contrived real world violence served up as entertainment.

    It isn’t always the definitely bad that trips our rage circuits; it’s more often the stuck drawer, the things that hook when not wanted, the tangle of wires that gets worse with the effort to untangle them, and things that fall after we carefully set them down. These are a few of the mere empirical verities that may substitute for the nontrivial exigencies of our public life that currently challenge our ability to comprehend. Again, these are things that can be empirically confirmed and even though they are trivial on the surface, they perhaps subconsciously serve as a substitute for the aggravating confusion of injustice that is too much of our culture, much of which invisibly lies in ruins. The sensible one can be the focus of aggression even though the cathartic value is doubtful, and the real cause(s) of anger is a black hole that consumes aggression as if nothing.

    If a vast proportion of us have learned to tolerate contradiction such as inquisitorial psychiatric commitment laws sitting side by side with accusatorial criminal ones, where the latter is observant of procedural safeguards for the accused, and the former is an assault on the Bill of Rights, do we then accept together what should be highly contrasted and separate? An ideology of liberty supposedly taught in an institution that is none of it and is the primary place where the accommodation of contradiction is learned instead of the skills that differentiate and resolve what should be in conflict; this is a forced education that never shows the contrast that should exist between it and the self guided kind.

    Perhaps this thinking can also be made to demonstrate a correlation between low contrast and broken contexts which makes much of our discourse an anxiety ridden chore. Perhaps not. Perhaps it’s not so trivial to send an email of low contrast complaint to these sites as we run across them. Spend the time to craft one for universal use with reasons why it isn’t trivial, and click-click, they’ve been served.

    I use an add-on in Firefox named NoSquint which manages site specific zoom levels and color settings. It also has global settings that can alter the appearance of all sites. With two clicks I can change the color of text of any site. It takes much of the aggravation out of using the Internet but of course does nothing to change the bad behavior. Thanks for the blog.

Leave a Reply

Your email address will not be published. Required fields are marked *