Rule of Contrast
When creating a color scheme always remember the Rule of Contrast for a Website:
Use at least one dark color, one medium dark color, one medium color, one medium light color, and one light color.
Strong Contrast Insures Legibility
Make sure the contrast between the light color and dark color is strong. The best way to test the light and dark color is to create two images. The first one should have the light color as text and the dark color as a background. The second one should have the dark color as text and the light color as background. If both images are easily readable then the contrast is good. Here’s an example:
Defining some important terms:
Contrast means to compare in order to show unlikeness or differences. In design, contrast is achieved by varying the value of a color or colors. Value refers to how light or dark a color is.
A lot of people misconceive what creates contrast. For instance, someone may say yellow contrasts with blue. This is not necessarily true! If the blue and yellow are the same TONE then the level of contrast will not be great enough for readability. The best way to test the contrast of two colors is to put them together, like we did before with the light and dark colors of the monochromatic scale. However, for this test add another block that shows the two colors in ‘grayscale.’ Grayscale removes color while retaining the color’s tone. Take a look at this example with blue and yellow. Since the tone is so similar the text is not very readable. Avoid close tones with choosing color scheme swatches.
The Best Way to Turn Colors into Grayscale in Adobe Illustrator
Select the part of you work that you want to turn into grayscale. Then go to the top menu and select Edit > Edit Colors > Convert to Grayscale.
Color Versus Tone
ColorJack.com is a site that displays endless examples of color schemes right on their homepage. I visited ColorJack and picked out three random color schemes. The color schemes on this site are not necessarily read for the web. In the example below, each color scheme from ColorJack is coupled with its grayscale counterpart. Turning colors schemes temporarily into grayscale is an important tool for analyzing the values.
#1
#2
#3
Following the rule of contrast the monochromatic scheme on #1 is web ready. #2 turned out to be the same tone, so it is NOT web ready. #3 is negotiable so we’ll do a contrast test like the ones at the beginning of the post.
#3 passed the test and is web ready.
Don’t forget colors can be deceiving, even to a trained eye. Perform a test whenever you have any doubt on whether a combination of colors will be readable on your site
Analyzing Contrast Using a Color Scheme off a Website
Montway Auto Transport is a readable, well constructed, easy to navigate, website. The contrast between the text and background is strong, the color scheme uses natural colors and a limited palette, and the scheme is consistent throughout the site.
Red Alt I Like Your Colors online tool is a great way to start deconstructing a website’s color scheme. Simply go to https://redalt.com/Tools/I+Like+Your+Colors and scroll to the bottom of the page. Type the address of the website you want to analyze in the input field. Review Montway Auto Transport color scheme used by writing all the colors and their HEX codes for later reference, or keep a tab in your browser open with the results.
Now go back to the website you want to analyze and take a screen shot. Upload that image to Adobe Photoshop. Using Photoshop, click and analyze any additional colors used in the color scheme that I Like Your Colors may have missed (it only reads the code so colors in images won’t show up).
Below is the color scheme for Montway Auto Transport:
Conclusion
Montway Auto Transport follows the rule of contrast for websites.
Use at least ….
one dark color, [black]
one medium dark color, [dark teal]
one medium color, [spring green, blue]
one medium light color, [light blue & beige]
and one light color. [eggshell]
You can also see how Montway’s site uses three dark colors and three light colors. The strong contrast between the light colors and dark colors contribute to its legibility and clean design. Regardless of someone’s personal taste in colors, if contrast is used correctly, your website will be easy to read and navigate.
Works Cited
Chapman, Cameron. “Color Theory For Designers, Part 2: Understanding Concepts And Terminology – Smashing Magazine.” Smashing Magazine. N.p., n.d. Web. 31 May 2011. <https://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/>.
“I Like Your Colors – Red Alt.” Home Page – Red Alt. N.p., n.d. Web. 31 May 2011. <https://redalt.com/Tools/I+Like+Your+Colors>.
“Instant Car Shipping Rate Quotes Calculator | FREE Auto Transport Rates and Quote | Online Vehicle Shipping Rates and Quote | Montway Auto Transport.” Car Transport Shipping Calculator | Free Auto Transporter Instant Quotes | Montway Auto Transport – car transport Chicago, automotive transport,auto transporter, car transporter, car transport, car shipping auto transport, car shipping calculator. N.p., n.d. Web. 31 May 2011. <https://www.montway.com/auto-transport-quote.php>.
