Not Quite Black and White
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 GrayBit.com, 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 MikeCherim.com 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.
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!
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!
Mike Cherim responds:
Posted: August 22nd, 2006 at 7:57 pm →
Thanks David; I aim to meet the needs of my visitors. And thanks for that spelling, Joe. I used Google trying to find the right spelling and all I could come up with was controversy and mixed information.
I like the scientific aspect of it in your article by the way. Not being scientific at all, I think the secret of dark on light is to not use pure white. For me, especially at night, a bright background is hard to take. Almost none of my designs use pure white or pure black because contrast can hurt. So while it’s needed to be of a sufficient value, to much of a good thing is rarely good.
I have a (no longer) secret method of testing my designs for readability: My wife. She has poor eyesight and is a great tester for me. If she can read it then I know almost anyone can. A little off-topic here, but at her work she has very modern equipment, all up-to-date, but she keeps her resolution at 800×600 because it makes seeing the screen and reading content much easier. There’s a lesson in this for anyone discounting that resolution… it’ll be around for a long time just for this reason.
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 http://www.clacksweb.org.uk/site/preferences/ - 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.
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!
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!
Mike Cherim responds:
Posted: August 23rd, 2006 at 9:30 am →
@Dan: That’s awesome. That’s exactly what I’ve been doing on my designs lately. It’s now my standard build stuff. I almost always offer a style changer. The initial landing style must be well done and accessible, but I offer alternatives. A classic example of my default build can be seen the Thompson/Center Association (link goes to site’s free info page). I offer three styles. Each lesser than the one before it but more useful to some visitors. Some developers — a trend perhaps, from what I read at Neal Venditto’s site — are offering inaccessible default styles (still good markup) with the option to make them accessible. This, to me, isn’t a real good practice as explained in my comment to his article.
@Anthony: Family, yet another developer’s resource. A good one, too, and long as they can be objective
@Jack: By “too far” or “too accessible” as I put it, I basically mean foregoing my design ethic for the sake of accessibility. Offering a zoom layout, for instance, as the default style while offering a means to change it to a more widely appreciated theme is, in my opinion, going too far. I want to make sure the default theme is doable and quite accessible, but great looking, then provide alternate themes on demand. But I suppose I could make a site with no styles and a question/link at the top of the page: “Would you like styles on this site?” Trouble is, the site only has a few seconds to make a good impression. Maybe it’s the designer in me. Design is so very important in my eyes.
Mike Cherim responds:
Posted: August 23rd, 2006 at 3:19 pm →
This is my response to Jeff Croft’s related article:
It was too large to post there and I didn’t want to edit it down to meet the word limit.
To begin I will say I am one of those people that do not define web accessibility as making sites for the disabled. I subscribe to the broader definition of the word.
I sit on the fence preferring not to fall to either side knowing there has to be a middle ground on the best sites. I’m not a zealot/snob and I think we’re all essentially on the same team (or I like to think that way). We all prefer to Break Barriers if we can… right? At Accessites.org we are trying to exemplify this by showing that accessible sites need not be boring black and white affairs. That developers can offer the best of both worlds. Design doesn’t have to be at the users’ expense nor does it have to be at the designer’s expense. Nor does the site have to lack in functionality.
I agree that accessibility in not binary. There are Levels of Accessibility. And while no site is perfect for every user, it can be made at least acceptable for most. There are certainly benefits/reasons to make a site accessible, some of which don’t have to do with the disabled. Here are Ten Reasons.
I do agree with Veerle Pieters in that this can very challenging and not every hard-core accessibility advocate understands the difficulties (or importance of the other side). But in my opinion, both sides deserve attention. To me this is the backbone of solid development. It’s not geeks making sites for geeks, nor is it about making site for any one user-group. The successful developer will see both sides — all sides — and try to accommodate all; knowing it’s tough and perhaps not even completely feasible.
Personally it is this challenge I enjoy so much, not just meeting a checkpoint. I like knowing I’ve made a site that satisfies as many users, including robots, as possible. I find it engaging. I want to do the best I can and find satisfaction in trying to do so. Accessites.org isn’t the worlds most accessible site, nor is it the prettiest, but it does fall into the middle ground nicely leaving nobody completely high and dry. And making it was fun yet at times difficult. As an example: We used to have accesskeys present on the site. One day, though, we got an email from someone using the contact form who tried to write a character entity (in their name) and ended up on another page using alt+0. That is a problem for few users, but nonetheless we met the challenge and installed a script that allows users to set their own accesskeys.
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. Nobody writes such compelling content that I won’t just leave the site if it’s not suitable or can’t be easily modified. Adjusting my display doesn’t fall into the simple category in my opinion.
As an aside: Somewhere in the comments above (can’t find it) it was stated that the Library of Congress doesn’t have every book on audio. True, but they do try. It’s up to the author/copyright applicant. Specifically the copyright application states:
Anyway, this is my position on this touchy subject. If I will forego any user group it’ll be the one that says “I’m not upgrading my version IE4″ et. al., as I must draw a line somewhere and that group at least has a choice I would think.
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.
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.
Karl responds:
Posted: August 23rd, 2006 at 4:47 pm →
Great reply Mike. Jeff appreciated it too I see.
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.
Mike Cherim responds:
Posted: August 23rd, 2006 at 8:33 pm →
@Karl: Thanks. It bothers me to see people bickering. Unless someone is into inaccessibility on the web, doesn’t want to be crawled by search engine spiders, and wants to exclude certain user groups (I can’t even fathom this), we’re all seeking the same thing.
@Joe: Nomensa’s got some good stuff over there, not to mention a great looking site. And you’re right, I should use the proper terminology instead of following suit, but to be honest I didn’t know it (do now, though). My background is 15 years in print design in connection with my other company, and about two-and-a-half on the web, and there it’s referred to as normal and reverse, though the terminology you’ve provided certainly would apply to both worlds. I’m not a graphics designer, though I love graphics design, and I do design graphics, if that makes any sense. I should also offer a style changer here, but I haven’t. Time, for me, really is a factor. I manage a number of websites and literally work at least 14 hours a day, about six-and-a-half days a week. Based on my experience as a corporate director, three years of hard work is what it takes to start a successful company. One of the problems here — something that’s prevented me from doing a “reboot” and making this site better — is I need to move the theme as it’s a well-known WordPress (WP) theme and I need to display it. Thus I need to add another installation of WP on this domain so I can move it all (like I did with my SeaBeast theme. Then I’d be able to replace the theme here. I do like this simple theme though, and considering its age and my level of experience when I made it, it’s not half bad. What with image replacement, available content, jump links, and the replacement of WP’s default Continue reading » links, it has no huge barriers. But offering a zoom layout (at least one), and changer would be a great addition. I’m not opposed to zoom layouts at all even though many hurt my eyes. Adding a positive one at least would be good. Right now, though, I’m fixing some issues on my CMS and have been working on rolling out a much more sophisticated version 2. It’s on my list though, all of it. I love doing this stuff, but I have a wife, kids, and still just 24 hours in my day.
Mike Cherim responds:
Posted: August 24th, 2006 at 9:58 am →
How odd, I didn’t even know Jeff responded here. I never got an email alerting me nor did it show up in the moderation queue until this morning when I was moderating all those ever-popular “teen-lesbian-gay-swingers-viagara-cool-site-bro” posts, haha. Sorry Jeff, it spent 12 hours in the Twilight Zone for which I can’t explain.
I had seen his reply on his blog and responded there, but to try and cut down to back-and-forth. Here’s how I responded to his reply: