Legal

Effective design principles for web designers: Contrast

Ryan Boudreaux reviews the design principle of contrast for web designers and shares some color contrast checking tools.

If you have taken formal courses or lessons in design then you probably already know the fundamentals of effective design principles, including the four famous standard precepts: contrast, repetition, alignment, and proximity. Furthermore, if you've examined these standards, then you might also recall a special acronym associated with their combined initial characters; however, many have used alternatives that are not as degrading, including PARC and CARP. These four design principles are standard knowledge for the print design community; in fact, several books are required text material for many college courses on the subject, including design for non-designers, such as "The Non-Designer's Design Book (3rd Edition)," by Robin Williams.

In this post, I'll review the design principle of contrast, as it relates to web design with a focus on color and how to test for color compliance.

Contrast

From a completely creative viewpoint, contrast occurs when two or more related elements are displayed differently, and the greater the difference, the greater the contrast. The significant point of effective contrast is taking similar elements on a web page and transforming them into unique entities, sections, asides, or containers, for example. Some of the most common ways of crafting elements of contrast include establishing differences in their attributes, such as color, which seems to be the most popularly used technique today. Other attributes include size, shape, texture, orientation, position, and movement. However, two similar elements with a greater degree of contrast do not always equate into a visually appealing experience.

Perhaps the best examples of using contrast can be demonstrated with the use of color values assigned to text and typography elements on a website. The foreground color to test is the text itself, and then the background color is just that -- whatever background the text is layered on top of, an image, gradient, or RGBa color for that matter.

Contrast using color

Using effective color contrast in web design is actually quite important not just for the aesthetic value, but for web accessibility. Many people are color blind or visually impaired, and ensuring that your website color contrast is adjusted accordingly provides added responsiveness and accessibility. Testing your website color contrast is a good practice; several tools (see below) are available that provide the indication of the page's luminance contrast ratio. Typically, a contrast ratio of 4.5:1 or higher is satisfactory to meet the W3C WCAG 2.0 guidelines.

Color contrast checking tools

This list of color contrast checking tools are helpful aids to ensure your website has the right mix of foreground and background color contrast. Several tools will check the balance of both color difference and brightness difference and will display the results including brightness difference, color difference, color compliance, contrast ratio, and WCAG 2 compliance from AA to AAA compliant.

Check My Colours is a tool provided by Giovanni Scala, and it is used for checking foreground and background color combinations of all DOM elements on the page. Just plug in the URL to be tested and the checker will determine if the DOM elements provide sufficient contrast when viewed by someone having color deficits. All the tests run on Check My Colours are based on the algorithms suggested by the World Wide Web Consortium (W3C). The tool is displayed below in Figure B after checking the DOM elements for a sample web site

Figure B

Colour Contrast Check by Jonathan Snook allows you to specify a foreground and a background color and determine if they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen"[W3C]. Figure C shows the Snook's contrast checker in action.

Figure C

Luminosity Colour Contrast Ratio Analyser by Gez Lemon allows you to calculate the luminosity contrast ratio between a foreground and background color by entering the hexadecimal color code. Lemon's luminosity analyzer is shown in Figure D:

Figure D

WebAIM Color Contrast Checker by Web Accessibility in Mind, can be used to adjust the color by darkening or lightening your original color foreground and background color in RGB hexadecimal format until it meets the Double-A standard. The checker also allows you to lighten or darken the foreground and background colors to test their combinations against the compliance requirements. You can use the color picker to change colors or change luminosity. The WebAIM color checker in use is displayed in Figure E below.

Figure E

In my next post on design principles, I will review the principle of repetition for web design.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

9 comments
blaineclrk
blaineclrk

I have normal vision and have little to no trouble with most degrees of contrast. I have a nephew who is color blind, red/green, and has trouble with contrasts of the same shade of red/green. If the shading is also different, he has little to no trouble. My wife is blind in one eye and has slightly distorted vision in the other. Her best contrast for long term reading and writing comfort is dark blue text on a medium to light blue background. That's not much contrast at all color-wise, only in shading. I dabble in web dev as a volunteer for an association of the blind and low vision. Our committee gets hit occasionally by one faction of our membership or another over shade, color contrast, text style, layout and more! It is absolutely impossible to provide optimal viewing for everyone unless they have the skills to create their own over-riding css preferences for their browsers and then that leaves out graphics which can't be altered. And how many everyday internet users have the ability to build their own styles preferences for their browsers? Very few. Perhaps this is something that browsers will have to take into consideration in the future, standard preferences or addons to allow individual settings? Didn't mean to toss in the accessibility issues to change the topic, but it's something that has to be addressed more and more each day and it just keeps getting harder and harder as more varying types of access problems become common as more and more people become users of the great internet and bring their own peccadilloes along for the ride. It's enough to make you tear your hair out ... maybe that's why I don't have much hair any more?

maneetpuri76
maneetpuri76

Really nice! Contrast do play a very essential role in defining objects on a website and most importantly separating pictures! You can find some cool color combinations over here too: http://www.colorcombos.com/

360websitedesign
360websitedesign

Thanks for sharing information on a topic that is still un-discovered by a majority of website designing professionals. I look forward to gather more information in your next post.

foss.paul
foss.paul

Thanks for the links, good to know.

alfred
alfred

At 83 my eyesight is less than perfect even with glasses. Figure B in the article illustrates an example of what is a complete disaster as far are I am concerned. Others have mentioned the glare of black text on white backgrounds but the reverse is much worse as the thin lines which white characters show on a black background mean that l i 1 look the same and 6 and 8 can't be told apart. The rest of the text only causes eye strain so I will not check my sites with Checkmycolors. I find a pale yellow or pale blue background the best for easy reading. I support the statement that light grey lettering is also useless for older eyes.

Deadly Ernest
Deadly Ernest

their is a condition called contrast glare that causes headaches and can even cause the text to look fuzzy to some people. This is because the difference in glare level between the contrasting colours are too high, such as dead black on brilliant white. This is a major issue for anyone with eyesight issues, and also for older people whose eyes can't adjust as quick as they used to. I have a lot of older clients who find their new computers give them headaches until they call me in and I change the default colour scheme from black on white or the silly light grey on white that many with eye sight difficulties see as a blank page. I set them up with either a mid blue text on sky blue background or something else with pastel shades that they like. It makes life a lot easier for them. Also, you can get a contrast emphasis to text simply by using the bold function or a change of font size, even a change of font type to italics makes a section of text stand out.

RudHud
RudHud

While I am by no means an expert, I would like to propose a simple rule for checking contrast for accessibility: If you have to check it, it's not accessible. In particular, the current fad for light gray on white is just plain stupid. In twenty years, VH1 will be making fun of it. Ryan, I love the topic, and accessiblity is very important. But I'd love to see more detail beyond access issues. And I am looking forward to the rest of the series.

Deadly Ernest
Deadly Ernest

many people create web pages with colour settings that override the preference settings of the user's browser or computer, thus, when a knowledgeable power user has set there system up to suit themselves they get stung by the settings on the web site. Luckily some browsers can be set to ignore the colour settings from the css, but that's not always possible.