Search

In Episode 6 of Screen Space: Color Design 101

[Transcript]

Greetings and welcome to episode 6 of Screen Space: Color Design 101. It is Sunday July 6, 2008. For the United States Citizens in my audience (which may be my whole audience, if not let me knew), Happy belated 4th of July. The 4th was actually inspiration for this episode. I was trying to decide which of the many upcoming topics to do. After running in the Peachtree 10k road race (the largest 10k in the nation), I decided that colors were a fitting topic.

As you know by now if you’ve been listening, Screen Space is a podcast for all of you out there who want to make your websites, blogs, and other new media more usable, accessible, effective, and efficient. I, your host, am Dr. Jennifer L. Bowie. I am a professor at Georgia State University where I teach a variety of classes related to this podcast. I also do much of my own research in this area.

Without further ado, let’s talk color. One of the biggest differences between print and new media design is color doesn’t cost any more in new media. You can use millions of colors (but please don’t) and it doesn’t cost you any more then using just black and white. This is not the case with print. Unfortunately the ability to use color without extra cost can lead to some very colorful and very atrocious designs.

Color is a very complex topic, and artists and graphic designers can spend years studying it. However, advanced knowledge is not necessary to use color effectively in your new media. In this episode I’ll cover some of the basics, and in future episodes I’ll cover more material on color. It is a topic I could dedicate the whole podcast too instead of a few episodes because there is so much to know and consider. Today, I’ll focus on some basic, key concepts for color design.

The first principle of color use online is to use color to communicate not decorate. Don’t simply add color because it looks pretty; add it because it makes your site more useable, efficient, and effective. If you do it well you will have a good looking site that communicates clearly. The following principles all provide information on using color to communicate.

The best way to communicate clearly with color is to limit your use of colors. While it is tempting to turn many a website and new media into a rainbow of color, it is not good design. Too many colors can be distracting, confusing, reduce focus, and look childish. The result is more circus then accessible, effective, and efficient. So how many colors should you use? Generally around 4 colors is a good idea. With four colors you can have a background color, a main design color, and then two contrasting or highlighting colors. Fewer colors are fine, and can lead to very striking designs. More colors are difficult to pull off without advanced color training, so I recommend sticking with four. My own color training includes graduate graphic design classes and years of art lessons from my grandmother, and I tend to stick to 4 or fewer colors. In fact, most of the websites I create for my classes have just 3 colors.

Note: I do consider black and white often as a single color when choosing a color palette of 4 or fewer colors. We are used to black and white and often not do see them as “color”. Also, black and white are best for background and text colors due to their high contrast and readability. Thus, it is fine use back and white as a single “color” and then choose up to 3 other colors for your 4 color site. However, if you could back and white as a single color, do not make them major design colors, just supplemental and background—for example black body text on white, with other colors for borders, header images, headings, links, and so on. If you choose to make black a major design color, such as your background then you will want to count black and white separately.

Images, especially photographs can make sticking to a 4 color palette difficult. If possible, try to integrate the images into your color palette. It is a good idea to try to match the dominate colors of the images with the color palette of the site. This will not only create a cleaner design, but look planned and professional. However, it is unlikely you can get the pictures to completely fit the color scheme, as it is very hard to get photos with only 4 colors (without photo editing anyway). If you have several images with many colors, consider this when creating your site color palette. Try to match key images with the palette and consider a more limited color palette for the site—maybe 3 or even 2 colors instead. This will make the images “pop” more and create less color clutter on the site.

When selecting your color palette there is another thing you will need to keep in mind: contrast. You must select colors with good contrasts, especially for any colors that will be used for text. The text, particularly body text, should contrast with the background it is on for readability and legibility. It is best to have a high contrast and the smaller the text, the higher the contrast should be. The highest contrast is, of course, black and white. This is why we see so many pages with black text on a white background. Another good choice, if your users are not blue-yellow colorblind, is dark blue on white. Dark grey on white is also good.

Generally you want your text to be darker and your background lighter. Darker backgrounds overpower lighter text and create blurred edges in the text. This blurring decreases readability and leads to eye strain. If you must use light text on a dark background, use larger sizes of text and try to avoid black backgrounds, as the blurring tends to be worse with black. While high contrast is preferable, there are two things you want to make sure you avoid. The first is low contrast. This may seem obvious, but it is worth noting anyway. Low contrast is simply hard to read. It can cause the readers discomfort and eye strain. It actually hurts my eye to try to read it. It is even harder for those with vision issues to read. So, avoid low contrast. The second thing to avoid is combining bold vibrant colors, either with each other or with some dark colors. Bold colors as text can cause a vibrating effect on backgrounds that are also vibrant or dark. This vibrating leads to eye string and creates an odd effect and may lead to headaches. Some combinations that cause this include bright red on black or dark blue, yellow on blue and vice versa, green on red and vice versa, and so on. Thus, also avoid bold colors that cause the vibrating effect.

I’ll put some example of good and bad contrasts, including the bold vibrating text up in the transcript for this podcast, so you can see what I mean.

Once you have a color palette for your site, turn it into a color scheme. After you have selected your colors decide generally what you will use them for. What will be your background color? Your text color? What color will you use for your main design color? What will you use for links? Headings? Other design elements? Key pieces of information? Obviously, if you are working with 4 or fewer colors there will be at least a few elements in the same color. So consider which overlaps are the most effective for your site. I tend to use my main design color as background color for a major element—maybe the header image or section or as a margin background color. I then also tend to use it for at least my first heading level and my normal links. I’ll use a contrast color for the title if it is set against the major design color, active and/or visited links, and often less vital design elements, such as a margins or border colors. Finally I’ll use black and white as a single color—often with black text on white for the body text. You may find a general design scheme like this works for you, or you may find something else works better. But do remember to limit your colors and consistently use the same colors for the same design elements.

I’ve already mentioned choosing color from your color scheme for certain types of information, but I want to talk more about this. Use color to code information your site. The information doesn’t have to be something complex, like instructions. It can be any piece of information—for example a heading level or link. Each piece of this type of information should be the same color throughout your site. For example, if your heading level one is purple on one page, it should be throughout the site. If your visited link color is chartreuse on one page, it should be on every other page. This obviously creates consistency, but it also makes it easier for your users. If they see something in that color, they will begin to recognize it as a piece of that type of information, and soon they will automatically categorize it. This will make the site more useable, efficient, and effective for them. If you are using a limited color scheme you may have several types of information in a single color. This is fine; just make sure there are other ways to visually differentiate them since they are the same color. For example, a heading and link may be the same color, but the heading should be visually different from the link. It is probably larger, bold, and set off from the text with white space, whereas the link is likely within your text or in another special location.

Do use color to emphasize these different pieces of information and consider what needs emphasis. Obviously things like links and heading do. What else does? Should it be in color? You may have important notes on your site—maybe for new information, sale items, danger warnings, and so on. These will “pop” more if they are in their own color and users will be more easily able to find this information on other pages in your site, once they have discovered your scheme.

However, do not rely just on color for coding information. Different types of information need to be visually different and color is just one way, and a good one way, to do that. However, it is not enough. What if your users are color blind or have a monitor or other device with limited colors? So, make sure you provide a secondary cue, such as size, bold or italics, white space, shape, or something besides color to also visually differentiate the type of information.

The most important thing here is to be consistent. Choose a color for a type of information make sure you apply that color each time you provide that piece of information.

I’ve mentioned color blind users a few times in this podcast so far. When considering color it is important to also think about color blind users. About 7-10% of the Untied States male population is color blind and about 0.5% of the female population is color blind. This means approximately 1 in 10 users that come to your site will be color blind. Color blindness can range from full color blindness to partial color blindness. People with full color blindness cannot discern any colors and see the world through variations of brightness and shades of gray. Luckily this is very rare. More common is partial color blindness, when the person cannot distinguish between some colors. One type is red-green partial color blindness, where the people cannot differentiate between red, orange, yellow, and green. There is also blue-yellow partial color blindness which includes several variations from being less able to differentiate colors to being “green weak”. Variations of the blue-yellow partial color blindness are the most common among males and females.

Luckily a few simple design choices can lead to fairly good designs for color blind users. In fact, I have already covered a few of key things you need to do. Do not use colors as the only way you code information—also use bold, italics, size, white space, shapes and other methods to distinguish pieces of information—say headings from body text. This way a color blind user can still make a distinction among the different types of information. Use high contrast in your designs, as color alone may not be enough for color blind users to distinguish the differences. A user who is red-green color blind may see you lovely red and green Christmas site as yellow and a muddy green. But if you use a dark red and light green they will still be able to distinguish various elements.

Fortunately there are many tools out there that can help designers who are not color blind see what their color scheme and site will look like to people with various forms of color blindness. Vischeck offers two tools for web site designers concerned with making their sites usable to those who are color blind. The Vischeck tool stimulates how web sites look to people with various types of color blindness and the Daltonize tool is a color blind image correction algorithm. The url is http://www.vischeck.com and I will have a link in the transcript.

Another tool is the Color Scheme Generator, which allows you to select colors schemes and see how they look with 8 different types of color blindness. This is very handy and even fun to play with. The URL is http://wellstyled.com/tools/colorscheme2/index-en.html and the url will also be in the transcript.

These tools and tips will help you design for color blind users, but there is still a lot more you can do. If there is interest, I could do a whole episode later on designing for color blind users.

There you have it, there very basics of color in web design. Obviously this is an extensive subject, and I will discuss it more in future podcasts. But for today remember these key points:

      Use color to communicate not decorate
      Limit your use of colors to 4
      Try to incorporate images into your color scheme when possible
      Create a high contrast color scheme, and especially for the text and background
      Design a consistently applied color scheme
      Use color to code information, but do not rely just on color for coding
      Consider and design for your color bind users

Since this podcast is already so long, I am going to save the first web site critique and explanation of the Screen Space Star Ranking System for next episode. Please do keep submitting good and bad sites for me to discuss in future podcasts and to rank using the Screen Space Star system.

Tune in next time for the basics to the visual design of new media. Now that you know about colors, we’ll talk about basic design principles.

If you have questions, comments, or thoughts on what you want me to cover please send me an email at jbowie@screenspace.org or check out the Screen Space blog—www.screenspace.org. Have fun and design well!

Screen Space is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. So, feel to send a copy to that website with the crazy color scheme that gives you a headache, but don’t change it, do give me and Screen Space credit, and don’t make any money off of it.

Screen Space’s opening music today is “African Dance” by Apa Ya off of Headroom Project and the closing music is “Survival” by Beth Quist off of “Shall We Dance”. Both these selections are available from Magnatune.

 
icon for podpress  Screen Space 6: Color Design 101 [16:29m]: Play Now | Play in Popup | Download

4 Responses to “Screen Space 6: Color Design 101”

[...] Screen Space (the podcast) #6, I covered tips for designing for colorblind users. In case some of you are not listening to the [...]

[...] part of Screen Space (the podcast) #6 I created a nice table with text color and background color contrasts, to illustrate good and bad [...]

Hi Jennifer,

I was enjoying your series/blog/podcasts on Screen Space but have not seen any updates lately. Just wondering if you were going to continue the series at some point.

I am an old-style HTML coder and do most of my web pages using the Notepad text editor. Most of what I have done is for friends and family or for my church.

Your series has helped me think of the “bigger picture” and I am starting to redesign some of the pages to make them more user friendly.

Thanks for you series,
Kevin

Hello Kevin,

It is great to hear from you! I am so glad this has helped. I plan to do more, but am working right now of gettign some publications out as I am going up for tenure this year. I’m going to do a metacast soon with details and will try to get out at least one podcast a month until I go up for tenure (and then a more frequent schedule). I’ll be back, so please don’t unsubscribe yet!

Thanks,
Jennifer

Something to say?