I have very little aesthetic ability, but I can tell when something is too hard to read.
For example, here is “dimgray” font on a black background:
Not the easiest thing to read, is it?
We usually talk about optimizations and strategies that help improve your website’s ability to attract traffic or increase conversions but sometimes an optimization doesn’t need to have a measurable effect on the bottom line to make it worth doing. We should do them because it is the right thing to do. While we’re optimizing our sites for business-driven motivations we should also be making the web a better place. This includes making sure our sites adhere to privacy laws, treat our users with respect, and are usable by users of all types, even those with disabilities.
Today we’re going to discuss a site’s contrast and how to determine how easy a site is to read for users of all types.
Contrast
Cleary, font size and style choices can affect someone’s ability to read text on a page. Sometimes, this isn’t something that one would ever need to think about. Other times, real problems arise that make text very difficult to read and, as a result, hamstring a page’s ability to convert. A common reason for something being difficult to read is because the contrast between the text and the background is not significant enough for the text to properly “pop”, like a our dark gray foreground and black background above.
This example may look good but it is probably not the best in terms of readability for users with ‘normal’ eyesight and definitely not for users who have any kind of vision-related impairment.
Here is a little background on contrast from the W3C organization:
The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). For people without color deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991). Color deficiencies can affect luminance contrast somewhat. Therefore, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background.
With this in mind, our goal with all the text on our pages should be to provide the best reading experience possible. This means providing solid contrast between text and backgrounds.
But wouldn’t it be great if we could know, for a fact, whether we’re offering enough contrast between our text and background?
Luckily for us there is a standard or metric we can use to test our sites against to ensure maximum visibility for all that visit the site!
A simple way to check whether you’re offering a high enough contrast ratio for your users is to use a contrast ratio checker, like the one from contrast-ratio.com.
The tool is really easy to use — just plug in the background color and the text color as either the name of the color (“white”, “black”, etc.) or a more specific method like a hex code.
Getting the hex codes for the colors you’re trying to compare is easy whether you’re using Chrome, Firefox, or Safari.
Here is an example from UpBuild.io. If we wanted to get the hex code of this blue button we would do the following:
- Right click on the element you’d like to get the hex code for.
- Select “Inspect” or “Inspect Element” depending on your browser.
- A new window should open with the pages code exposed.
- The element you right clicked on should be highlighted (again, depending on your browsers behavior).
- You can then use the “Style” window to find information about that element, including the hex or color codes.
Once you have your hex or color codes entered into the tool, just hit the big green button and you’ll get a score that tells you how much contrast you’re providing. The goal is to have a score of at least 4.5 but ideally above 7. The higher score the higher the contrast. For more on how these guidelines for scores were created, read this helpful article from W3C.
Here are some examples of colors and their contrast scores:
As we can see, the further apart the colors on the spectrum the better the contrast ratio, thus, a better the reading experience.
So, whether you’re building a new site or just want to ensure that your site provides a great reading experience for everyone, right now is a great time to run your color choices through this helpful tool and see where you stand.
