4.1 Color shock

Color is arguably the most significant element in any layout because it is likely the first thing users will notice and, ultimately, it will set the tone for how they perceive the contents of the work. Jason Beaird offers a good (and thankfully brief) recap of color psychology in The Principles of Beautiful Web Design-you know the stuff: white = purity, blue = calm, green = nature, and so forth. What he mentions of note here is that while people tend to have similar reactions to colors, each experience is still unique, depending a person's background, associations, and cultural factors. So, color psychology is a guiding force, not a rule, that can help designers choose colors that make sense and will likely impart the correct "feel" for the website contents or message.

Choosing colors is a little complicated, however, and can quickly become a mess. Sticking to a color scheme is a good idea, and should theoretically keep us from the tendency towards tackiness that I have mentioned before. That is, defining a palette that works should keep us from deciding that a little purple randomly placed here, a little pink over there, and a little green at the top would look nice. The key is harmony, not chaos. So, in his discussion of complementary color schemes (always a nice choice to create visual excitement) Beaird mentions discordant colors as a potential pitfall. Indeed, used poorly these close-but-not-quite complements can be difficult to look at. However, they can also create some visual excitement because they are highly contrasty but more unexpected than a true complementary pair; the key that Beaird notes is that they MUST be used sparingly.

With that in mind, I began to think of a notebook and planner combination that I carried last year-hey, inspiration comes from anywhere and everywhere. In fact, the planner was a light lime green and I was beyond excited for the calendar year to shift so that I could begin carrying it to meetings with a muted red, hand-tooled leather notebook. The combination was striking and I got more comments to that effect than I care to repeat here. Anyway, with that in mind I decided to use this concept of red-green discordant complements to see if it could work as a web color scheme. I went to the Well Styled Color Scheme Generator 3 and selected my lime green hue from the color wheel (#2CFF00, if anyone is into hexadecimal color values) and picked complement from the menu of schemes. Sure enough, it generated a selection of colors that included the too-bright exact complement, as well as the more muted red (#A60010) that pairs beautifully. Why does this work? Because the combination is unexpected and fresh, which is what good design is about. The main problem I have with straight complements is that they often scream out sports team, or in the case of bright red and green, holidays.

An important side note here is that not all color combinations work in just any configuration. Universal usability can become an issue with many colors-more, in fact, than you would think. Certain colors are just hard to read together because the contrast levels are insufficient. This is especially true for people with less than perfect eyesight, and it is worth checking the contrast levels before using poor text-background combinations. The Snook Colour Contrast Check is a good tool for this purpose because it gives you a definitive Yes or No as to whether the colors pass the W3C criteria that they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen." In this case, the answer is no.

Check out the Snook Colour Contrast Check here:
http://snook.ca/technical/colour_contrast/colour.html

Fortunately, the beauty of creating a color palette is that I'm not stuck using only my complementary colors, which I don't really want to use as a background-text combination anyway. Instead, I'll add some tints and shades to create a more rounded selection of colors that are harmonious, but will offer me other choices. In fact, Making the background white is probably a good choice to offset the intensity of my colors. That way they can lead the viewer's eye around the page without bombarding them with intensity. Simplicity is key here, and my color scheme will remain with white, black, and a few shades of red and green. The Colour Scheme Designer has another great feature that allows you to preview the look of your chosen color scheme in both light and dark versions (basically, the main color as a "dark" background or white as a "light" version of the page). In this case, while I would change some of the specific color placement, the preview gives me a great idea of how my color choices would look.

Here is my color palette with green as the predominate color on a light background webpage:

Here is the same palette displaying red as the predominate hue, also on a light background:

Check out Colour Scheme Designer here:
http://colorschemedesigner.com/

I really do like this color combination. It is bright and fun and definitely not what I normally gravitate to in design. It is possible to use these colors in a way that accents rather than overpowers, and the tools outlined here are a tremendous asset to testing and choosing the specific values that look right. That said, I am going to save this combination for another project. As Beaird notes, there are more elements to consider in a design, and I think this particular combination will wind up competing with the photographic content I plan to include in my website. Harmony of all elements is the key, and so for now my search for the perfect palette will continue on.