Not Quite Black and White

Posted August 22nd, 2006 by Mike Cherim

I have to hand it to Roger Johansson for being a master of coming up with interesting topics on his web log. His article, Light text on a dark background vs. readbility really generated a lot of feedback. And in that feedback there was of course myriad opinions about what’s best and what people prefer. The short answer is there’s no perfect way to do it. The saying, you can’t please all the people all the time, pretty much sums it up. Some like light text on a dark background, while others prefer dark text on a light background. It’s not easy.

I think Veerle Pieters sums it up well on her responsive article, My view on light text on dark background vs. readability when she wrote,

“I think that most accessibility/usability experts have no clue how hard life of a designer really is. We constantly have to battle in our mind coming up with something creative and if not we fail in our profession and will likely not convince any clients.” –Veerle Pieters

I’ve long known there is no magic answer, no black-and-white solution. I asked Roger what he thought of the default style at, and truthfully he responded that it just didn’t work for him (fortunately there’s not a lot to read on that site). But he did state he liked the alternate dark on white theme I offer there.

So, as designers/developers, what do we do? How do we strike the right balance? How do we please most of the people most of the time? Let’s take a look at some solutions or scenarios and the problems these solutions present:

Go Standard

The typical page is back on white. Most people can see it, it’s common, it’s acceptable. Doing it this way you’ll satisfy at least half of your content’s readers is my best guess. It’s not very original, but it’s fairly safe and acceptable. But it may lack that certain something, a certain *je ne se qua. The element of style may be lacking. So let’s step back from that and let the designer have a say.

Go Gray (or Silver and Blue)

Contrast seems to be a real killer. Too bright, too intense and you lose some people. I think I fall into this category. I don’t really like high contrast. I read so much online that my eyes ache at the end of the day. A high-contrast site exacerbates this quickly. Rip my eyes out, stick a fork in me… I’m done. On this site I use #666 gray text on an off-white background (#fafafa). For me, this works well. However, I have an excellent monitor and this combination works well for me. Repeat: For me! It doesn’t do very well on Gez Lemon’s clever Colour Contrast Analyzer, but I feel know there’s more to it than just colors.

Size (and other stuff) Matters

Other factors, not just colors, need to be taken into consideration: The size of the text; the font-face chosen (and its stroke thickness); the quantity of text; the leading and kerning (line-height and letter-spacing, respectively); background imagery or lack thereof; text-alignment (left, right, centered, justified); content area width; even your intended audience. All of these variables play a role and need to be considered.

Killer Contrast Kills

Zoom layout styles like that discussed in Joe Clark’s article at A List Apart, aptly named Big, Stark & Chucky are very beneficial for some users, but most I’ve seen absolutely kill my eyes. Is there such a thing as being too accessible? In my opinion, yes. That’s not to say there’s not a need to go to such extremes; like I wrote above, these styles can be very beneficial for some users, but I certainly wouldn’t recommend that as a default style. So maybe choices need to be offered (as Joe suggests).

User’s Choice

One excellent option, maybe the best option, is to offer users a choice of style. By this I don’t mean offering no styles (though this is an option on a properly built site), but rather to offer a server-side style changer and to offer a number of options to help users enjoy your content in a way that suits their individual needs. I don’t offer it on this site and instead try to strike what I consider a good compromise, but it’s something I’ve done on a number of sites. A case in point, as mentioned above, is GrayBit. Roger responded to my question telling me he didn’t care for the default light text on a dark background style, but since I offer a style changer, it gave Roger the option to select a style he was okay with. I’ve never published my style changer script, but the need to do so looms large and will be done in the near future. The script has been refined over the past couple of years and, as noted, is available on many of my sites, but I’ve never shared it (as of yet). It’s probably ready for public consumption, though. Maybe I’ll do it at where I tend to play around with and offer some cool stuff (or try to).

Go Nuts

While all of this can drive a developer/designer crazy, I don’t mean the heading above in this way. As I said, user choice is a good thing. You can take it to a nth degree and go nuts in that way. Assuming that is you have the time and/or inclination. I’ve done it. My old portfolio was done that way. In the middle box to the left there are a number of styles (colors and graphic choices, not layout), some really wild and crazy choices, too. It’s really out-dated, but I still go back now and then to look at that site. Check it out, some of the styles are neat. (My favorites are City Slick, Fusion, IronWorks, and Lunar.)

Future Tech

I don’t have the time to figure out how to do it, but what would be cool is to offer a sliding scale control feature. Not a style changer, per se, but rather a style modifier. Go to a site, grab the control, and slide it one way or the other to optimize the contrast to meet your needs. Just like you can probably do on your monitor (but please, don’t suggest to anyone that they should actually adjust their monitor on a site-per-site basis… that’s not a realistic option). But a slider, yeah, that’d be pretty cool.

Ball’s in Your Court

What you offer is up to you, and if your readers don’t like it they will put up with it if they can or go elsewhere. The accessibility advocate in me says make it as reader-friendly as possible or offer alternatives. The designer in me says make it sexy. The middle ground says make it sexy and readable, or offer both by way of said alternatives. Web development isn’t easy, and doing it right, really right (if that can even be defined), is downright difficult on a good day. I wish you luck. I know I need it.

*Note: I hope my use of je ne se qua is correct. You may know the term as jene se qua, je nais se qua, je ne sais qua, or je ne sais quoi. I could find no clear cut answer.

13 Responses to: “Not Quite Black and White”

  1. David Zemens responds:
    Posted: August 22nd, 2006 at 3:19 pm

    I agree that choosing the correct text and background color can be troublesome. Being old school, I love the color choices you have used on this blog. I guess the old standard of dark on light just gives me that warm and fuzzy feeling.

    Each time I look at a light text on dark background, it really turns me off. To each his own, but for me it almost always chases me off the site right away. I think that the dark background looks great for a photography portoflio or something similar, but the text on a page like that always distrubs me when I try to read it. Perhaps if I wore my reading glasses I would feel differently, so take these comments with a grain of salt!

  2. Joe Dolson responds:
    Posted: August 22nd, 2006 at 6:22 pm

    For what it’s worth, it’s je ne sais quoi (the tiny bit I can remember from my single semester of college French helps me here).

    It looks like we’re reading the same stuff here - I must have posted my own response not long before you did! Different ways of approaching it, though - I went looking at studies to see what kind of information actually was out there.

    Not a lot, as it happens.

    Judging from the comment above, so far we’re all pretty agreed on preferring dark text against a light background!

  3. Dan responds:
    Posted: August 23rd, 2006 at 3:48 am

    Using web standards makes it a lot easier to offer alternatives to users. At ClacksWeb I decided early on that the default style would have an off-white background, to accommodate dyslexic users and thoese (like me) who just find black on white a bit too dazzling at times.

    But since the site is built using CSS, it takes about an hour to produce an alternative style. We’ve got 4 at the moment - see - and these seem to provide something everyone can live with, although it would be no sweat to produce more. The next logical step is to allow the user to set foreground and background colours themselves, without needing to know CSS, but that creates other challenges, particularly with images.

  4. Anthony Brewitt responds:
    Posted: August 23rd, 2006 at 4:01 am

    As with most design issues this “common ground” we have to settle on is always down to the users taste, strange you said about your wife, the first thing I do when looking into contrast is ask my girlfriend, mum, and grandad. All have different levels of poor sight. I actually think GrayBit’s NightSpring theme has a better contrast than the alternate white background version!

  5. JackP responds:
    Posted: August 23rd, 2006 at 4:53 am

    Frankly I prefer dark text on light background. I also prefer the ‘daylights’ theme for GrayBit. However, I don’t think there’s anything inherently bad about light text on a dark background and indeed have designed a speed dating site for someone with whites, pinks and reds on a black background. You have to consider what design is appropriate to your content.

    I don’t agree that we can go “too far” with accessibility though; I think this is just a case of one man’s accessibility being another man’s poison, as it were. The lines for me are quite clear: accessibility is not at the expense of design. Providing you do them both properly. Just look at Andy Clarke’s stuff!

  6. Jeff Croft responds:
    Posted: August 23rd, 2006 at 4:27 pm

    Nice post. Thanks for taking the time. Sorry you ran into my character limit. :)

    Roger’s preference, which is shared by others, is something that needs to be taken seriously. Asking users to think and act and know their browser’s functionality may not be the best solution, not when we have the ability to provide a style-changing script giving users an option. I know I don’t want to adjust my monitor for sites that I visit. I want it be a simple experience.

    Just to be clear, I also don’t think telling someone to adjust their monitor or browser settings is ideal. And, I’d love to provide five or ten alternate stylesheets for all my sites. It’s just not usually practical, is all. This week alone I’ve built an entire newspaper site and a site for a TV sports show. I’ve only got 40 hours in the week — or 60, or whatever. Alternate stylesheets are great, and I think it’s awesome if people can do that. It’s just not always in the budget (and by budget, I don’t mean money), I’m afraid.

    What irritates me is not someone saying, “it’d be nice if we could add another stylesheet for people who have such and such preference.” What bugs me is the attitude where people demand that I do so, or else I get called out in public or considered insensitive.

    Roger’s preference for dark-on-light is just that: a preference. It’s shared by many people, but as his comment section shows, the vast majority of people don’t mind dark-on-light one bit (many actually prefer it). It’s a personal preference and nothing more. While I’d love to accommodate his preference because he’s a good guy and I don’t want to make his eyes hurt, where does this slippery slope end? If I accomodate his preference for dark-on-light, do I also have to abide when someone says the color orange makes their eyes hurt and I use it in my logo? What about when someone says big green polkadots in the background of a page gives them a headache? :)

    Accommodating real physical disabilities that incapacitate someone’s ability to make use of the content a site provides is one thing. Providing an alternate stylesheet for everyone’s personal preference where it relates to color scheme is something entirely different. And frankly, I think the later is overkill, and not worth my time.

    And, let’s not forget that nearly every site online today offers a RSS or Atom feed, which is the ultimate accessible version of a site. If Roger wants a light-on-dark site to be dark-on-light, he can get the feed and view it however he wants.

  7. Karl responds:
    Posted: August 23rd, 2006 at 4:47 pm

    Great reply Mike. Jeff appreciated it too I see.

  8. Joe Clark responds:
    Posted: August 23rd, 2006 at 6:39 pm

    Nomensa’s research showed that some people liked positive and negative layouts (well-used terms in graphic design that should be used here). So one could give both when offering a zoom layout. Unless of course one simply didn’t have time.

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.