Usability: Basic Color Scheming

Now that we’ve established how to format our text in a way that pleases the reader, we can move on to planning and implementing color styles. Color can be either a powerful tool or a crippling weakness. The important thing to remember is that having a hammer does not make everything into a nail.

example1

The example above seems to be very simple in terms of color, using 3-4 colors at most. The color palette consists mostly of different shades of brown, and the entire page follows that trend. By not throwing a plethora of different colors onto the page we can keep the readers focused on what we want them to see as they follow the natural flow of the page. Empty space also plays a larger role in defining areas of importance (such as the navigation menu).

example2

In this example we use a much flatter look compared to the textured, semi-realistic style of the previous page. The basic principles remain the same, though, as we can see that our basic color palette is comprised of black, white/gray, blue, and green. The large header image contains a much wider range of colors, but they remain within the confines of that section and are not spread out all over the page.

An important thing to notice about both of the above examples is that the text color has been consistent with the background color. Sometimes black-on-white text seems boring or overdone, but the reason for that is because it works. Consider the following example:

example3

Have you ever been reading or looking at something with bright colors and notice a lingering “afterimage” when you looked away? Those neon spots in your vision are the result of the photoreceptors in your eyes becoming stressed after parsing bright colors for too long. When adding text onto your website, it’s important to consider that the user is already staring at a glaring screen. Making bright text on a dark background that will further stress their eyes is not a good way to get them to return.

Now imagine that you’re doing research on any given topic, and you come across an article that seemingly has all the information you need. The only catch is that it looks like the example above. How long could you tolerate that pink-on-black?

Leave a Comment

STYLE SWITCHER

Layout Style

Header Style

Accent Color