Colour Demo: a demonstration of hideous colour choices
by llizard (aka ejm)
Testing COLOURS for Irritation Factor
internet safe 216 colour chart . horrible colour combo demo
This page has been set up to demonstrate how important colour choices are in webdesign (or any design for that matter). Hover your cursor over the various sections of the menu to highlight links so they are readable.
about poor colour choices
At first it might not seem too bad (cough), but imagine a whole lot of text. And then if that text is italicized, made bold, larger and smaller fonts used in a haphazard manner, the irritation bar is raised to a higher level. Add some blinking text or a number of multicoloured animated images (mercifully not added to this page), and you will soon find that nobody stays on your site. The colours here are ones that I personally find to be intensely irritating on the eyes. And of course, for the colourblind, it’s probably almost impossible to distinguish between colours that are of the same intensity.
I also find that a lot of yellow text on a large bright blue background is pretty awful too. And then if a script-font is chosen, it’s even worse. And worse still if the font size is particularly small. But that’s another story….
Just to demonstrate this particular colour choice more fully, I’ve made use of the handy Lorem ipsum text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Pretty horrible, eh?
Please hit the following links to see the hideous result when half the links are visited and half are not. If one link and another link are embedded in the text, it gets worser and worser.
It looks about as frightening with the colours reversed and “school” green as the background colour. Even more than with the above colours, the link to the middle of the page and the link to the top of the page that are embedded in the text do not work at all well. The italic, larger font and smaller font are the same bad. This sort of thing can be fixed by declaring the colours in CSS only (which I did for this page), but chances are that many of your viewers don’t know how to disable CSS and/or won’t take the time to bother and will just leave your site, never to return.
conclusion:
Please, choose your colours carefully.
internet safe 216 colour chart
© llizard 2004, 2008
gallery of original ASCII-art works by llizard aka ejm 