Home > Web Design Hints > Usability > Color Combinations

Usability Guidelines: Color Combination Examples


I'm going to repeat my advice about colors here, so you can see what the colors look like as full paragraphs. There are two links in each, back to the usability page and back to the top of this page, so you can see what visited and unvisited links look like. (The paragraphs repeat. Just look at the colors. You don't have to read them again.)

Black and White: a classic; dull but clear.
Use a color scheme people expect and are familiar with; light background, dark text. If you must use a tiled picture as a background, use your photo editor to fade it down so it doesn't distract.
Back to the Usability page. Back to the Top of the page.


White and Black: a mistake.
Make your text links underlined and blue. Make visited links purple. This is dull, but it is what people expect. They are not going to want to run their mouse along every word on the page to see if it is a link. So, making your text links black but adding a fancy java applet to make them change size and color when someone hovers over them is annoying.
Back to the Usability page. Back to the Top of the page.


Light Yellow and Brown: Warm but readable.
Since your links are underlined and blue, no other text should be underlined or blue. This makes it clear, even to a quadriplegic reading your site with a stick held between his teeth, what is a link and what isn't.
Back to the Usability page. Back to the Top of the page.


Light Brown and Black: Getting murky
Your plain text and your link text should both have a pleasing and clear contrast with the background. That means your plain text should be black or brown and your background should be white, light yellow, light brown or light gray; not light red, light green or light blue.
Back to the Usability page. Back to the Top of the page.


Light Grey and Black: formal
Use a color scheme people expect and are familiar with; light background, dark text. If you must use a tiled picture as a background, use your photo editor to fade it down so it doesn't distract.
Back to the Usability page. Back to the Top of the page.


Light Red and Black: visited link is hard to see
Make your text links underlined and blue. Make visited links purple. This is dull, but it is what people expect. They are not going to want to run their mouse along every word on the page to see if it is a link. So, making your text links black but adding a fancy java applet to make them change size and color when someone hovers over them is annoying.
Back to the Usability page. Back to the Top of the page.


Light Green and Black: Ugly
Since your links are underlined and blue, no other text should be underlined or blue. This makes it clear, even to a quadriplegic reading your site with a stick held between his teeth, what is a link and what isn't.
Back to the Usability page. Back to the Top of the page.


Light Blue and Black: Not much contrast
Your plain text and your link text should both have a pleasing and clear contrast with the background. That means your plain text should be black or brown and your background should be white, light yellow, light brown or light gray; not light red, light green or light blue.
Back to the Usability page. Back to the Top of the page.


Lime Green and Red: Ouch!
Use a color scheme people expect and are familiar with; light background, dark text. If you must use a tiled picture as a background, use your photo editor to fade it down so it doesn't distract.
Back to the Usability page. Back to the Top of the page.

Images

Here are three examples of background images; "Crinkle" is textured paper, "Mule" is a real image, and "Mule Light" is a light image.

Crinkle:
Make your text links underlined and blue. Make visited links purple. This is dull, but it is what people expect. They are not going to want to run their mouse along every word on the page to see if it is a link. So, making your text links black but adding a fancy java applet to make them change size and color when someone hovers over them is annoying.
Back to the Usability page. Back to the Top of the page.


Mule
Since your links are underlined and blue, no other text should be underlined or blue. This makes it clear, even to a quadriplegic reading your site with a stick held between his teeth, what is a link and what isn't.

Your plain text and your link text should both have a pleasing and clear contrast with the background. That means your plain text should be black or brown and your background should be white, light yellow, light brown or light gray; not light red, light green or light blue.
Back to the Usability page. Back to the Top of the page.



Mule Light
Since your links are underlined and blue, no other text should be underlined or blue. This makes it clear, even to a quadriplegic reading your site with a stick held between his teeth, what is a link and what isn't.

Your plain text and your link text should both have a pleasing and clear contrast with the background. That means your plain text should be black or brown and your background should be white, light yellow, light brown or light gray; not light red, light green or light blue.
Back to the Usability page. Back to the Top of the page.



This is a page in my site's section on Web Design. The section has a page for:
Student Web Site suggestions
Church Web Site suggestions
HTML colors and Hexadecimal numbers
Usability suggestions for any non-profit organization with a volunteer web master.
You might also like the essay, My Adventures as a UU Web Master, a talk I gave to my church about being their web master.



Sections of my web site:

Home | Christmas Letters | Genealogy | Homilies | Misc. Essays | Peace Corps | Web Design

Problems, comments or complaints? Need an opinion? Send E-mail to:
This page updated: January 11, 2016