If you read my last post, you have an idea about why color contrast is important, especially for those with color blindness. But color contrast is not just for the color blind. I have seen some poor color choices on various public websites. I will not embarrass them by naming them here. However, I will show you some of the text colors I have seen used on different background colors (Not all website pages use white as the background color). The following image shows just a few samples of some of the bad color choices I have seen.
How can you tell if the text color has poor contrast with the background color? Well, you could sit back so that your eyes are about 1 ½ feet from the monitor (about half a meter). Can you read the text without squinting? Do you feel the need to move your head closer to the screen to read the text? If you do, that might be a clue that your color choices for the text and background may not be good. Over time as you learn what colors work well together, you may be able to spot low contrast colors by just looking at the page. However, to get started there is a better, more scientific way to determine whether the color contrast is acceptable without limited your website to black text on a white background or vice versa. Even better, it will not cost you a thing.
(Note: when calculating contrast, it does not matter whether you are comparing the text color to the background or the background to the text color, the contrast ratio is the same.)
If you read the last post, you may remember that I referred to a tool called Colour Contrat Analyser 2.5.0 from The Paciello Group. It is a free download and extremely easy to use. All you need to do is to sample the colors for the background and foreground and it performs all the hard mathematics to calculate the color contrast ratio. For example, the color contrast ratio for the orange text on a white background in the upper left quadrant above is shown in this figure.
The large text box in the middle right of this window shows you the RGB values for the foreground and the background. It then displays the color contrast ratio which is 1.9:1. But is this value good or bad? The four lines beneath the color contrast ratio tell you that the text for these colors failed at Level AA and Level AAA and it also failed for large text at Level AA and Level AAA. But what does that mean?
First, let me introduce you to the WCAG (Web Content Accessibility Guidelines). This document was published by the W3C (World Wide Web Consortium) and includes recommendations to make web content accessible to a wide range of people with disabilities including blindness, low vision, deafness, learning disabilities, cognitive limitations, limited movement, photosensitivity, and others. It has published guidelines for ADA compliance using three different levels: A, AA, and AAA. There is no color contrast test under Level A, so let us go directly to Level AA. At Level AA, the contrast between the foreground and background colors must be at least 3:1 for a bold text that is 14 pt. (about 18.67 pixels) or regular text that is at least 18 pt. (about 24 pixels) or larger. All other text must have a contrast ratio of at least 4.5:1. The text on most web pages falls into this latter size category and thus must have a 4.5:1 ratio. At Level AAA, the color contrast test is more restrictive with the contrast being at least 4.5:1 for 14 pt. bold text or 18 pt. text or larger and 7:1 for all other text.
(Bonus Info: White on white (or any color on the same color) has a ratio of 1:1 while White on black (or black on white) has a ratio of 27:1.)
(Bonus Info 2: Color contrast is an accessibility requirement for those with some vision, not the blind or anyone who uses a screen reader. Why? Because screen readers read the HTML on the page without any concern about the color. Therefore, a blind person can ‘read’ white on white text.)
So now you know what that the other text in the large text box is telling you. However, to make it even easier, you can see on the left side of the Colour Contrast Analyser examples of what the text looks like with the selected colors and either a green checkmark or a red ‘X’ to indicate pass or fail for those colors. There is a convenient check box at the bottom of this dialog that shows the contrast results for the three types of color blindness discussed in my last post.
In this case, the ratios are all remarkably similar and all very poor. Why do we need the results for color-blind people? I asked that question to a company that specializes in website accessibility, Monsido, and they told me that to be safe you really should make sure that your color contrast ratios meet at least Level AA for all vision types, not only for normal vision. Keep in mind that not all color contrast tester programs will provide the ratios for the different color blindness types. Therefore, be sure to choose a tool that supports calculating the ratios for all vision types.
Next time I will talk about ways you can ‘fix’ your color selection to meet the requirements of the WCAG.