Quick Design Checkup: Color Contrast

Most of us don't think much about our current blog design unless someone complains or we get tired of the theme. We go merrily along creating great content.

But not taking stock of existing design flaws is like skipping your annual doctor visit or car inspection – just waiting for something to go wrong. Blog readers and fans are a little like your Mom. They don't want to hurt your feelings by telling you your design needs retouching.

This post kicks off our Design Checkup Station. This and followup posts will put your blog through some tests and inspections to reveal "leaking visitors." If you participate, you'll be better equipped to plug those holes with minimal effort. Best of all, it's a free DIY (do it yourself) inspection.

The Design Checkup Process

Let's keep each post short by focusing on one design aspect. You'll do the initial assessment of where your blog stands on each checkup. Posts will list steps for fine-tuning and adjusting your results.

You leave a comment with your test results. I'll take a look at your website if you need advice on the next step. If you fix anything, tell us what you did and what worked best.

The Design Color Contrast Checkup

One of the most important elements of your blog is CONTENT. So make sure it's not only engaging but legible. Together your combination of text fonts, color and background play a critical role in readability. The wrong background colors and images can undermine your post.

"Two colors are considered to provide good color visibility if the brightness difference and the color difference between the two are greater than a set range." The range suggested by the World Wide Web Consortium (W3C) is >125 for  brightness and >500 for color difference.

Finding Your Blog's Color Codes

First you'll need the color codes for your background and foreground (font) colors. Don't look in the template. (You can breathe easy now.) The easier way is to use a color picker tool. I use Firefox's Colorzilla, which puts an eye-dropper tool in the browser to get a color reading from anywhere on your screen. Click the eye-dropper, then click on the background to see the color code. Do the same for the font color.

If you don't use Firefox, download a Windows utility that puts the picker in the system tray. This one is free: ColorMania.  Having a color picker will be useful, so take the time to get one!

Test Color Contrast

I used the Color Contrast Ratio Analyzer software. It has a simple box to accept your color codes. Then press the Calculate button and you get immediate pass/fail results. The question of proper contrast is easily settled.

You should run the test for your post content colors, sidebar and footer (if they are different). This is what I keyed for BloggingWithSuccess post text: #FFFFF (white background) and #444444 (dark gray font).

Results showed:

"The contrast ratio is: 9.74:1"  and "Passed at Level AAA: The luminosity contrast ratio is very good for the chosen colours"

I looked at colors on two other sites:

"The contrast ratio is: 3.98:1  and Passed at Level AA for large text only : (at least 18 point or 14 point bold)"

"The contrast ratio is: 2.96:1 and Fail: The luminosity contrast ratio is insufficient for the chosen colours"

Adjusting Color Contrast

Let's walk through a tool that can help you adjust or even drastically change the color contrast.

1. Select either the background or the font color as the one you want to stick with. More than likely, the background fits your overall theme. If you want to "start over," use your color picker to get another background code. Use that value in the next step below. Let's assume you want the red background #78000, but need a better font color.
2. Go to the RGB-Hex Code Converter, but page down and use the tool called "enter hex color code to get the inverse value."  Then press the "inverse color" button. Basically, this returns the exact opposite on the color wheel.  Two snippets magically appear, showing you how they match.
   
3. Use the Color Contrast Analyzer again to verify the luminosity.
   

   "The contrast ratio is: 9.88:1; Passed at Level AAA: The luminosity contrast ratio is very good for the chosen colours (#780000 and #87ffff).

If the color contrast fails or is only passable, then try the standard font colors of black (#000000) on light or white (#FFFFFF)  on dark backgrounds.

Change Background and Font Colors

This is the part you may dread if you need to adjust your colors to better complement the content.  Depending on your platform and comfort level, you can do one of the following:

A. Blogger: Use the feature called "Fonts and Colors"

The post on Mapping Blogger and Custom Template Colors tells you how to use the Fonts and Colors feature in Blogger. For purposes of this topic, concentrate on changing these variables only:  "page background color" and "text color." Just key in the color code number and watch the preview pane – a great way to see how the page looks before you save changes. Blogger does the rest and updates the html.
(click for larger view.)More experienced bloggers can find and set the template variables ($bgcolor and $textcolor) directly, using Layout, Edit HTML tab.

B. WordPress.org: Modify your template style sheet

C. WordPress.com: Use Color Customizer

WP.com users can go to Dashboard, Appearance and select "Color Customizer." For my WP test blog these are colors I can change by keying in the color code:Like Blogger, you can preview before you make permanent changes. There is no way to change the background color.

Summary

The best time to check if your blog background and text colors work is before deciding on a theme. However, it is fairly easy to make adjustments later. This post gives you the tools to start that process. For more expert advice, you can turn to a friend who has confidence in changing templates. If necessary, you can also contact us for a quote on our consulting services.

The next step is yours; take the test and report your results in the comments. If you post the lowest fail results within the next week, you'll be our lucky 'winner' – complimentary help in making the proper adjustments. That's our way of saying thanks to our readers.

Any suggestions for the next topic are welcomed. As always, your feedback is appreciated.