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.


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.


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...

Editor's Picks