Skip to: Navigation | Content | Sidebar | Footer

Full Archives

Autumn Leaves in the Garden

October 29

Another major Zen Garden update this evening, with not three but six new official designs courtesy Americans Ray Henry and Lance Leonard, Brit Mike Stenhouse, Italian Sandra Greco, and fellow Canadians Nigel Goodfellow and Wendy Foster.

More updates to the comprehensive design list as well, but no new translations this time. We're still working on the server issue with foreign character encoding, so the Polish version I have on deck will have to wait.

This should more or less bring things up to date. If you have submitted recently and haven't heard back from me yet in any way, please, by all means submit again. I just jumped to Thunderbird as my mail program of choice, and have had some tremendous problems keeping things straight when it comes to the Garden backlog.

Fun Garden Facts

There has been a Zen Garden submission from every continent except the Antarctic. There are 56 official designs from 42 designers in 9 different countries, and 135 total designs. There are twenty translations with more to come. I get about seven to ten new design submissions per week. It usually takes me up to two weeks to process them, although I do try to rush official designs. In an average day, the Zen Garden gets in the neighbourhood of seven or eight thousand unique visitors (though it has cracked 10k a few times now), moves over a GB of traffic, and sends just shy of a thousand unique hits to each of the eight most recent submissions (the ones listed by default).

Permalink › | 14 comments

MOSe Menus

October 27

When in doubt, reload.

I introduced my idea of MOSe, or Mozilla/Opera/Safari Enhancement about four months ago, with my Zen Garden submission mnemonic. It’s time to take it further.

With a strong nod to Eric Meyer’s Pure CSS Menus, the latest tweak to mezzoblue adds an opaque CSS-based menu system to the global navigation system. That is, not a line of Javascript was used to construct these. Gecko browsers and Safari love them, Opera 7 has a few issues I may leave as an exercise to Opera Software to resolve, and all browsers that can’t handle them (you know I’m looking at you, Internet Explorer) have a fallback.

By logically structuring the bits and pieces that used to be strewn about the top navigation area and the sidebar, I’ve reduced the number of possibilities to ‘About’ (which covers information on the site, me, and a FAQ) and ‘Weblog’ (which features the RSS feeds, archives, etc.) Each of the two main navigation items link to a respective secondary page that lists menu items in a little more detail.

Responsible navigation allows all users equal access to content; doing it the way I have offers a way out for IE (and other CSS-capable browsers that miss the menus). A little bit of redundancy goes a long way toward accessibility in this case.


An extra div was necessary for each menu, thanks to my centered, absolutely-positioned layout. Given that FIR is used for the main menu items to start with, the code is a bit more targetted with extra classes and divs. These are necessary for the specific background images I use.

<ul id="siteInfo">
 <li class="li1">
  <a href="/"><span>About this Site and
its Author</span></a>
  <div id="sec1">
    <li class="li1"><a href="/">about dave
    <li class="li2"><a href="/">about
    <li class="li3"><a href="/">faq

Once you get around some of the hoops I had to jump through to position the menus properly on this site, the CSS is remarkably simple. The menu is hidden by default:

#sec1 {display: none;}

And then to show it upon hover, all that’s needed is this:

li.li1:hover > #sec1 {
 display: block;

Mozilla and Safari allow us to apply :hover to arbitrary elements, in this case meaning specifically the li that contains both the parent link and the child menu.

Why couldn’t I have just applied it to the a element within, and allow that to control the menu? Wouldn’t that have worked in IE? No, because XHTML doesn’t allow a elements to be nested — the menu’s ul would have to site inside the original a element. Besides, IE doesn’t support PNG.

The Visuals

And because I’ve written off IE by this point, the door was wide open for using PNG images to enhance the menus, which is exactly what I did. The background gets a 50% opacity blue PNG, and a nicely faded image sits just below each menu to give me a faint drop shadow effect.

I’m a little unsure how to finish them off — the mouseover image effects on the ‘About’ menu may be dropped, or I may apply them to the ‘Weblog’ menu eventually. I’ll have to start using them to figure out which way I’ll go.


No new technique is without its share of bugs, naturally. I am aware that Opera 7 doesn’t seem to get the absolute positioning right, and that resizing fonts seem to break the menus. It would seem the links aren’t quite being treated as block-level items, so overlap occurs. I have no clue why this is right now.

Let me know in the comments if you come across anything else. For now, I’m content to put these out there and see what happens.

And finally, a screenshot for you poor folk stuck on IE:

(Yes, I’ll probably end up boosting the opacity a little more to keep the menu items readable.)

Permalink › | 54 comments


October 26
Web Standards Project

I'll skip the really bad entomological puns then, yes?

Ethan Marcotte and I have become the two newest members of the Web Standards Project.

WaSP is "a grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all." For a more practical look at what this means, consider:

Many books on web development still teach outdated methods, and many practitioners take pride in delivering sites that look and work exactly the same in compliant and non-compliant browsers alike, at the cost of accessibility, long-term viability, or forward compatibility. Others develop proprietary code that works only in a handful of popular browsers.

Thus one of WaSP's primary goals is to provide educational resources that can help our peers learn standards-compliant methods that are in their interest and that of their clients and site users.

WaSP was originally founded in 1998 to encourage browser makers to use and promote core web standards; by the year 2001 it had become emminently clear that they had met their goal. The problem WaSP addresses today is developers coding for the browsers of yesterday, through habit or ignorance.

Today's WaSP exists to inform, encourage, and even inspire developers and designers to use what's at their disposal, to create a better web for us all. It's an exciting time, and a great group of people. I'm proud to be a part of this.

Here's to the web of 2004!

Permalink › | 32 comments

IE Development: XAML

October 24

Looks like the covers are slowly slipping off - a glimpse of Microsoft's browser strategy focussing on web applications has turned up overnight, courtesy Simon and Eric.

What all this is about: XUL, or XML User Interface Language was developed by Mozilla as an XML-based language for web applications. More simply, what XHTML does for web pages, XUL does for web applications. And this is all very important, largely because of the XML foundation and the implications for business.

Now what Microsoft has done is effectively developed their own version of XUL for Internet Explorer, which they're calling XAML. Remember the browser wars? Remember custom-coding DHTML libraries for two different platforms? Remember how ridiculously redundant that was even in an era when people had a stupidly casual ability to throw around bags of cash? It won't happen again.

The operating system lock-in created and perpetuates the browser lock-in. Now the browser will give that extra boost to the OS. "Our application only works on Windows, using IE. No, sorry, extra development costs are too much. You'll just have to use a Windows desktop."

Apple has a tremendous amount of momentum right now, and about three years to innovate and compete against an OS that was released two years ago tomorrow. If they embrace a development platform like XUL and actually make inroads with the customers who will be deploying applications using it, will it be enough?

All this can be somewhat negated by the opportunity that exists for Microsoft to play fair. If, as Simon postulates, XAML can be transformed server-side to XUL (using XSLT), then we all win. But Eric remembers his history, which suggests we shouldn't rely on that happening. I'll throw this into the ring then: even if it's possible, will it be cost-effective? For organizations to spend an extra 20% of a development budget to support a 3% share of the market is a bit of a stretch. But it's obviously do-able, seeing as how many still bend over backward for NN4.x.

The end result is still anyone's guess. A lot can happen in three years. This is an encouraging step forward for the web in general; at least the current stagnation is starting to show signs of ending. Whether the final outcome means an impenetrable hegemony is unclear. The only for sure thing is that the web landscape in 2008 will be radically different than what we see now.

That can't be a surprise to anyone.

Permalink › | 18 comments

Link Fest

October 23

In an attempt to catch up with all the things that would have made the Dailies if they weren't still down, here are a few juicy bits and pieces for your linking pleasure.

Branding Mozilla: Towards Mozilla 2.0
Fellow Canadian Steven Garrity writes a tremendously good article on branding Mozilla which should (and hopefully will) be used as a starting point for the re-branding effort.
Saffron-fresh weblog from Texas designer Josh Williams.
SXSW Web Awards
2004 Awards are open for entry. I'm thinking of entering the Zen Garden. Can you do that and not be at the conference? I'm still not sure if I'm going or not.
iTunes for Windows
Everyone and their dog has seen this by now. It's pretty, but slow.
CSS House
A house entirely in CSS borders. Built for Claire's CSS Challenge. Why? Because they can.
More ESPN Flash mischief
Adrian Holovaty uncovers an incredibly odd use of Flash for headlines. Mike Davidson defends it well. Still…
THE place to go to brush up on CSS floats.
Top Ten Canadian Weblogs
Well look who's number 8. All your suspicions have been confirmed: Canada is rather geeky.
Original ‘Master of Orion’ game art explained
Ten years old, and I still play this game from time to time.
MOMA Redesigns Logo
Who's more anal: semantic web geeks, or typography geeks?

Permalink › | 10 comments

Notes From All Over II

October 22

ALA 3.0, ReUSEIT! deadline, Garden thievery, iBook updates

The elves have been busy. A List Apart, after months of teasing, lives once more. A brand spankin' new design and backend publishing system drive the revised online mag, and three fresh articles kick off the rebirth.

Congratulations to Zeldman and everyone else who made this happen. It's not easy balancing a) making money, b) a successful, non-profit project, and c) being newly-wed. Zeldman is truly the Man Apart.

In this issue of ALA, Douglas Bowman contributes to the ongoing tab mania, with a beautiful example of thinking beyond the box. Dan Benjamin publishes the manual for his great PHP image rotator script, in convenient article format. Joe Clark tackles head-on the accessibility failure that is Fahrner Image Replacement.

Of course, having a vested interest in the topic of FIR, this is the sort of article I was dreading, but figured would happen sooner or later.

But this now-somewhat-outdated story (his own words) covers permutations involving display: none and visibility: hidden, which were popular at the time of writing; other methods have come to light since which would seem to solve some of the more dangerous problems. A forthcoming article is promised by the same, which I'll be eagerly awaiting. §

Slight navigation tweak around here. Things may look funny. In those immortal words, when in doubt—reload. §

Bob Sawyer writes to inform us that the deadline for the ReUSEIT! contest is rapidly approaching, and now is the time to finalize your entry. A set of great prizes awaits the winner, and your work gets passed by an impressive lineup of judges (which I somehow managed to become a part of). §

Right. This gets me going. In response to yet another ripped off Zen Garden design (just the CSS, which is normally fine, except no credit was given and the license was removed, which is definitely not) --

I had asked a web designer to come up with an unusual design for [organization]. This is the design he came up with! I sincerely apologise for any distress this may have caused you. We would like to retain the design and I am happy to follow your guideline as to placing your accreditation, for your design on the site. I have since spoken to the web designer about this matter, and given my disaproval for how the sites design came about.

Note to You
If you're re-using Zen Garden designs and trying to make money off of them, you will be found out, and probably in a highly embarrassing manner.
Note to Me
When there's reasonable doubt, give the benefit of it to the victim. They may indeed be an unwitting participant. §

Argh. At first I was put out that OS X 10.3 was announced but two weeks after buying my iBook. Now I'm even more so because they just upgraded the whole line to G4 processors. Moving targets are frustrating. §

Permalink › | 15 comments

Garden Update

October 20

Such is life — for about 24 hours this weekend the Zen Garden was inaccessible. What was supposed to be a simple server update turned into a nightmare for the generous souls hosting the site thanks to kernel compile errors, blown processors, and all sorts of other things I don't even want to think about. A few version synch glitches here, a little elbow grease there, and we're back online. Those guys rock.

To make it up to you, the viewer, my planned weekend uber-update went live this afternoon. Three new official designs, a slew of new designs on the comprehensive list, and a bunch of new translations await you.

Cornelia Lange submits a creative take for design #50 — 50! — a brief summary of some of the incredible work the Garden has received. Daniel Leroux, a fellow Vancouverite submits the subtlely gorgeous Budda. And FastClemmy throws another beautiful horizontal scroller in the ring with HoriZental.

The comprehensive list sports 123 designs, and is running the risk of becoming completely unwieldy. Perhaps a make-work project is in order to categorize better and make it easier to browse.

Translations! Czech, Hungarian, Indonesian, Swedish, and Turkish join the growing list, with Polish coming sooner or later. Currently the non-Romanized Asian languages (Chinese, Korean, Japanese) are a bit of a mess thanks to PHP's notorious lack of proper Unicode support, but we've hopes they'll be back to behaving properly later this week.

See if you can spot what I've done differently with the French translation — will the others follow suit? Time will tell!

Update: Actually, most of the translations that require non-Western character encoding seem to be broken, and I think it has to do more with the HTTP headers than it does with PHP. That should be resolved in not too long.

Permalink › | 10 comments

A Typeface Fantasy

October 19

And this is where we dive right in to the pressing issues, the questions that matter by god! The burning quandry at the forefront of all of our minds is, of course, where in the world did they pull a generic font family like 'fantasy' from for CSS?

It's been around since CSS1, but the CSS2 spec explains far better what exactly a fantasy font is:

Fantasy fonts, as used in CSS, are primarily decorative while still containing representations of characters (as opposed to Pi or Picture fonts, which do not represent characters). Examples include:

Latin fonts: Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

Okay, sure. Let's face it, no one has ever implemented precisely that. Unless a particularly keen user has overridden their settings, no browser has ever rendered it properly according to the spec. Comic Sans is not a decorative typeface. So in the wide world of fonts, why was it considered a priority, or even a good idea to introduce something so vaguely impractical?

Not only is this quirky font family a design nightmare, but accessibility suffers for it. A default font size that is considered more than generous using, say, Verdana, Georgia, or even Times could be completely indistinguishable given the intricate detail that goes into a pictographic or decorative letter.

No one in their right mind uses it (a complaint from 1997 that wasn't addressed then, and 6 years later still remains completely valid). It's an unpredictable time bomb on any page that dares. It's cruft in the spec, it's been suggested that it should be dropped, but it's not going anywhere in CSS3. Of course, we'll have WebFonts to look forward to once that's out (which includes some font selection capabilities that will make your head spin), but there in the middle, right amongst all the forthcoming goodness is useless old fantasy.

So who did it? Where did the idea come from, and who considered it important enough to sit in the comparitively small CSS1 spec? I had not a clue, so it was time to turn to Google. Dredging back to the early years of CSS proved quite a task, thanks no doubt due to web rot and decentralization (we're talking 1995 and 1996 here, when things were a lot smaller).

I browsed the relevant www-style archive from its inception to the release of CSS1 as an official recommendation. No luck. I Googled newgroups and the web as far back as I could go. Nothing. I haven't been able to find a single word anywhere on the public web toward explaining why this was a good idea at one point.

I have a hunch my answer might be found within the yellowing pages of Cascading Style Sheets: Designing for the Web (1997) by Lie and Bos. I haven't read it, and no one carries it anymore. If you have a copy, or have any clue whatsoever on how this came to be, please, reply in the comments. We're all on the edge of our seats.

Permalink › | 12 comments Notes

October 16

If you don't have thick skin before doing work for a high profile organization with fans who are very opinionated, you develop it in a hurry. The response has been great, but there are still points to be addressed.


A big one. What happened was I got asked to put some thought into that, but because of a restricted timeline I couldn't explore it as much as I would have liked. There are plans to spend some quality time on this in the next few months, but it couldn't happen all at once so I did two things.

First, I decided we wouldn't try a paradigm shift just yet. Colours were culled from the existing site, logos were tweaked rather than redesigned, and the only thing I really contributed that was completely new was a bug image for Bugzilla. Anything but the hideous devil chip that exists now.

Second, I worked on a new treatment of the logo which, by most accounts isn't right. Bad: the boxed head. Good: the text treatment. Most didn't even notice the typeface swap, and those that did liked it. It felt wrong dropping a floating dino head in a white area, so the black box was conceived out of necessity. Chances are that both will be scrapped in the end, but it's something for now.


There are a few things that are problematic here, and again I'll have to defer to the restricted timeline. Most pages are full-screen, but the home page is constrained to a hard pixel width. This, if you can believe it, was because I couldn't figure out the necessary CSS in time. It's the only way I got it working across all platforms consistently, although now I'm finding there's a bug in Konqueror anyway.

The main header is a little light on functionality. There was more that should have gone into it, but the focus changed as we developed. I originally designed for a more portal-like site with different search options, a font switcher, and the like—but that all got dropped.


Well, I thought I did a hell of a job here with my extraneous titles and skip nav links and relative fonts sizes and such, but it appears 90% doesn't exempt one from criticism. What's being discussed is how much we should defer to a user's settings, and allow their preferences to prevail. Particularily, no specifying of underlining or not underlining links (an issue I will happily concede) and no specifying of a default font size (one which I won't).

Markup & Validation

Content was frequently copied & pasted from older documents, so a lot of pages will spit out errors. My templates were okay, so we'll have to blame the content here. There are a lot of pages to retro-fit, so this isn't going away any time soon.

As well, the whole XHTML 1.0 and MIME type issue has reared its ugly head. I debated what to do about this at the beginning, and in the end I think chose wrong. HTML 4.01 will probably be the final goal, if for no other reason than to quiet the pedants.


It was tough work, and it's definitely not over. Reactions have been great, and those that haven't were (mostly) constructive and useful. Obviously you can't please everyone, but a lot of the basics have been covered.

I had about two weeks to throw design and code together. The project started last month, and my initial deadlines were ultra-tight. My involvement was strictly voluntary, and I've kept my standards as high as they are when building commercial work, but I didn't get everything right. Which isn't to say that I got most things wrong, but to explain that I can't be everywhere at once.

There are things you would do differently. There are things I would do differently! But this is what we have, and what we have is mostly good.

Permalink › | no comments Redesign

October 15

"If you want to change the world, shut your mouth and start to spin it." - Cracker

The past few months has dealt the web string of disappointing news item one after another. Microsoft all but killed IE, AOL gave Netscape the touch of death, and Eolas' plugin patent is making things really difficult.

The web is more popular than ever, but the major forces behind it are pulling out. Now is the time for all good men to come to... well, you know how that one goes.

Soon the Mozilla foundation will re-launch (available now in public beta) in the hopes of gaining back the market share that AOL/Netscape conceded to Microsoft over the past 5 years. That is to say, the 90% plus share that Internet Explorer currently enjoys somehow must erode for the Mozilla Foundation to be successful.

They are competing head-on with Redmond, and no one more than they recognizes what a monumental undertaking this is. Microsoft is only helping by letting Internet Explorer stagnate, but the remaining installed base is huge and it will take drastic measures to undermine its dominance. A non-profit organization stealing back market share from a company with over $40 billion in cash on hand?

They're going to need some help.

Why don't we all just let Microsoft continue its dominance of the market and let them call the shots? Because competition is in the best interest of everyone. An application service provider needs a free and open platform that doesn't cost an arm and a leg to get a foot in the door. A web developer needs non-proprietary, well-supported standards to decrease development time and focus on more important issues like accessibility and usability. Businesses large and small need the chance to compete in an environment without the threat of one company with an illegally-gained monopoly easily crushing them if they're deemed 'competition'. An end user needs a secure computing environment. IE offers none of these.

Why is it important for Mozilla to win? Mozilla is a non-profit organization that seeks to better the web, not line their pockets. Decisions made will be in the interests of everyone, not for financial gain of the few. Right now, any market share not going to IE is a good thing. Support Opera, love Safari. But long term, Mozilla must capture a significant enough portion of that share to prevent us from ending up here again.

The Mozilla Foundation can't do this alone. They need the help of developers, distributers, and designers. If you haven't yet begun using Mozilla 1.5 (released today to coincide with the new site) or Firebird 0.7 (also released today), why not? If your browser of choice is symbolized by a stylized blue 'e', perhaps you should investigate the other options available.

And don't stop with yourself. Tell a friend. Tell five. The first time you demonstrate a browser that just doesn't allow pop-up windows, you will have made a friend. When you show off the power of tabbed browsing and type-ahead find, you will have made a convert out of the most stubborn IE fan. You don't even need to get into the built-in security and cutting-edge standards support; the other features speak for themselves.

The new site exists to further the Mozilla brand, and make it ridiculously easy to get the latest Mozilla software. Support the foundation with a donation of time or money if you can. Support the site by making sure it's well-linked. Support the cause by spreading the word.

Mozilla needs your help. Consider lending a hand.

If you have been reading this site for any period of time, you'll remember various pieces detailing the fall of IE, and what could possibly be done to make things better. Ideas have come and gone. Nothing has happened. Ideas can't live on their own without a life support system that comes from action.

So action it is. This is my contribution. This is my way of making the world a better place. Some write. Some code. I design.

Godspeed, good lizard.

I worked with an excellent production team to bring my design to fruition, so thanks also due to Rafael Ebron, Tristan Nitot, and Dawn Endico.

Also note: I don't know where the new Firebird home page came from. Today's the first time I've seen it. So don't blame me.

Permalink › | no comments

Dangling Carrots

October 10

Speculate away.

??? #1 ??? #2 ??? #3

(Those of you in the know may remain smugly silent. It won't be long now.)

Permalink › | no comments

Syndication Format

October 9

I realize I'm opening up a can of worms here, but I honestly want a solid answer. I'm hoping everyone can put aside their differences and help constructively. Flames and off-topic comments will be deleted liberally. Consider this a social experiment. I can't believe I have to write all this.

The issue: due to various constraints which I will not discuss, if I had to choose just one syndication format to publish with today, which should I choose? Consider aggregator support, ease of human readibility, and ease of implementation. I want Really Simple Syndication, not Rich Site Summary.

Choices are RSS 0.91, 1.0, and 2.0. Discuss.

Permalink › | 18 comments

Eolas Fallout

October 6

Ethan Marcotte has an excellent summary of the technical information now available from the major parties affected by the recent Eolas ruling.

He points out that Microsoft, Apple, Real Networks, and Macromedia have all published information on the changes, and Microsoft has gone so far as to release a special preview version of the changed Internet Explorer and publish screenshots of how the new system works.

I guess the bright side is that work-arounds were created to keep the experience transparent to the end user. But a quick read through the steps involved confirms what you knew from the day the ruling was announced: the end result makes things worse. And I really have to question how a couple of extra hoops to jump through can satisfy any patent issues when the net result is identical to the so-called infringement.

Looks like any optimism in this previous conjecture was premature. Well done, Eolas. Well done, Verisign. Well done, everyone else doing to the web what spammers are doing to e-mail. Society thanks you.

Permalink › | 36 comments

Zen Garden Trivia

October 5

It was only a matter of time before I got one of these.

I bought this little ornamental zen garden because it fascinated me. I would like to know the history of zen gardens. How to set them up, and also how to get full relaxation benefits from them.

Just as Zeldman became an expert on Lawrence Welk for a short period, looks like I'll have to stockpile a reserve of information on Zen Gardens.

Google and a brand new form e-mail to the rescue!

Permalink › | 12 comments

Do Your Research?

October 2

So here's a question: how accountable to fact must you be when posting information for public consumption?

When I write here, I consider myself to be exploring an issue, not sounding the final word on the subject. I have no control over your interpretation of the same. Some may view my voice as authoritative, and as misguided as it may be I can't stop that. I make mistakes with my facts, mostly due to lack of knowledge or proper research. I know what I know and I write about it. Sometimes I check my facts, other times what I know or think is wrong though I assume otherwise. That's what gets published.

If I were adhering to an established journalistic standard, this would be abhorrent. But I'm not.

Consider my recent two entries about colour-blindness for example. The first was obviously (to me anyway) poorly researched and hinged around conversations and memory as opposed to solid fact-finding. The second was more in depth and valid, and even confidently presented researched material as fact.

But then, what is fact-finding? What is inherently more legitimate about deadening the muscles in your hind end while flipping through dead trees, than conversing with the same sort of person who would have written the text in the first place?

Especially when it comes to web-related topics, what constitutes valid research? Everyone knows you can't trust the information on the web. But when the majority of what you do takes place there, and isn't transported to other mediums, then you clearly have to start taking the information available more seriously. Or at least finetune your BS detector.

Of course the danger with that is the self-supporting network it creates. B publishes thought Q, C quotes B, D takes C's quote as fact, and F, G, and H all develop theses around Q, citing B, C, and D as proof.

If B didn't do his homework, that's a large chain of untruth to unravel when Q pans out as a falsehood. But who's on the hook? B was musing publicly. He never expected his thoughts to be taken as fact, let alone be quoted as authoritative.

So the question is who determines the nature of a weblog? If the author intends on publishing nothing more than exploratory musings, is the readership responsible for treating the subject matter as temporal and non-factual? If the readers notice reliably consistent factual information from the author despite what he or she claims, can they reasonably expect future publishing by the author to maintain the trend?

Of course the answer is obvious. It depends on the source. Just as a report by CNN is considered more authoritative the Weekly World News, an entry by an individual who has established credibility and legitmacy can be relied on further than one who has not. Then again, that's not to say that CNN never makes mistakes or panders to advertisers either.

The final onus must be exclusively on the reader. Do you believe everything you read? Do you believe everything you see on TV? Neither should you believe everything on the web. The only truth is your own experience, and everything else is just second hand.

It's the way it always has been, and a new medium doesn't change that.

Permalink › | 19 comments

Colour Bland: Contrast

October 1

This is the continuation of a series. View previous.

Greyscale is only one method of removing colour from an image, and as it turns out, it's an unrealistic way of doing it. The term colour-blind is misleading - almost no one sees in literal black and white (although that's tempting to disbelieve at times when debating).

'Colour deficiency' is a more descriptive label. There are two main categories of deficiencies (and a handful of rarities and sub-types):

Anomalous Trichromacy
The least severe, those afflicted are still able to sense most or all colour, but ability to distinguish between them is reduced.
Less common, but more severe, dichromats have problems with reds and greens, leaving them swimming in a world of blue and yellowy brown.

Referring back to part one, you will recall that value indicates how much light a colour reflects. Blues are darker than yellows, for example (view sample images). In most cases of colourblindness, the values don't seem to shift too radically.

Except when it comes to warm colours. Those afflcited with Protanopia (a variation of Dichromacy) see even the brightest reds as dark brown or black. This can very well mean that the viewer of a brightly-lit red stoplight would fail to notice it's even on.

So let's apply this to our work then. In part one we discussed the legibility of text, and how value affects the perception of individual colours. Let's extend that and look at how using value effectively can increase contrast of text and background colour, keeping in mind that there will be some who won't be able to view our work with a set of eyes similar to ours.

We can start with the basic principles: black on white offers the most contrast, so blue or purple on white is a step down. However, blue and purple both have darker values than, say, orange or yellow, so they offer an intermediate point between full contrast and little to none.

figure 2.1 - value and contrast, foreground

Conversely, black text on a yellow or orange background is only a step down from black text on white. Black on blue can be quite near impossible to read.

figure 2.2 - value and contrast, background

This applies to saturated colours. The following figure shows instances of orange text on white and black text on purple that actually offer enough contrast for most users:

figure 2.3 - workable value

Of course, the preceding examples have assumed full colour capabilities. But they've also carefully managed to avoid colour combinations that present major problems. The most common trouble spots are red and green, so what of them?

figure 2.4 - red and green

There are two directions these could go. The colourblind viewer might see these with a brightness shift, or without a brightness shift. Both instances can potentially occur, and the results may be different depending on which type of colour deficiency the viewer suffers:

figure 2.5 - possible brightness shifts

It's tempting to think that, because you're designing for a screen, the light emitted will be enough to prevent the dark variants from occuring. That is to say, even if a viewer can't see the hue, they can still see light, and so would be more inclined to see variant A over variant B. That's not the case however. Consider the red stop light example from earlier. Red is dark for some, whether it's flat colour on a printed surface, or bright red light.

So the only hard and fast rule here is that there are no hard and fast rules. You can't reliably predict what the end user will view when using problem colours like red or green.

The safest way to ensure your message gets across is, unsurprisingly, by following the WCAG guideline on the matter:

Ensure that text and graphics are understandable when viewed without color.

If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.

There is one small grey area, ironically. If you use a blue link within a field of black text, you are excluding almost nobody. The types of vision that can't see blue are incredibly rare, and those afflicted have trouble viewing a computer monitor anyway.

Further Reading:

Causes of Colors — Almost everything you could possibly need to know about colour.

Permalink › | 6 comments