Color Contrast and Why It's Important
One of the most common issues we see in our website review work is the failure by designers to meet color contrast ratio standards. In fact, we see issues in this area on more than 50% of the sites we review. In this post, I’ll explain a bit about what color contrast is, why it’s important, and provide some resources for you to use while designing or building your next website.
Understanding Color Contrast Ratio
In WCAG 2, color contrast is defined as a measure of the difference between the perceived brightness of two colors. The ratio ranges from 21:1 (black text on a white background) down to 1:1 (white text on a white background). By establishing a minimum contrast ratio, we have a baseline to work from. Of course, you should always err on the side of caution and consider your users. It’s better to have a slightly higher contrast ratio and ensure that more of your users can access your content. Some useful items to note:
The minimum ratio for text is 4.5:1.
For large text, the minimum is 3:1.
Large text is defined as text that is 18pt (24px) or larger, or 14pt (about 19px) when in bold face.
The lightest gray you should use on a white background is #767676.
By simply inverting the text and background colors, you are not creating any change in the color contrast. It’s the same!
Why It’s Important
By following the ratio guidelines, you’ll be ensuring that a much larger portion of your potential audience can engage with and understand your content. Some details:
Approximately 135 million people worldwide have low vision.
About 1/12 of men suffer from some level of color blindness.
There are significant studies showing that people with dyslexia have greater issues reading on the web when there is poor color text.
Tools to Use.
Like most accessibility issues on the web, color contrast issues are not difficult to resolve. Some great tools that you can use:
We can help.
As always, we are happy to help you with your accessibility needs. Just drop us a line and we can talk at your convenience.