Understanding Color Contrast Ratios

When you work in digital media in any capacity, people sometimes expect that you know stuff about visual design. And by “people”, I mean managers, peers, and clients. And by "stuff", I mean, like, almost everything.

It doesn’t matter if you’re a writer or a project manager or a developer or whatever else — visual design is baked into nearly all digital products and projects. Most of us could benefit from some knowledge, at least of the fundamentals.

In that spirit, we’ve created a tool to help you out: the color contrast checker. We hope this will be the first in a series of articles to provide design information for non-designers.

Defining Contrast Ratio

Confused? Unsure? Let's explain. In grossly oversimplified terms, contrast ratio is the difference between the brightest shade a screen can produce and the darkest shade it can produce. For our purposes, we're talking specifically about text on a background.

Why Do We Care

The higher the contrast ratio between the color of the text and the color of its background, the easier the text is to read. Readable text benefits all users, but it’s especially important to users with visual challenges. Low contrast ratios make your website less accessible.

Organizations like Web Accessibility in Mind, or WebAIM, have developed a grading scale to help determine whether websites meet accessibility standards. WebAIM's mission is to expand the potential of the web for people with disabilities, which is why they're concerned about issues like contrast ratio. Their scope goes way beyond contrast ratio, but that's our focus today. 

To meet the minimum acceptable criteria set by WebAIM, an "A" rating, the ratio must be 3:1. At Level Five, we strive for an "AA" rating as a minimum. This means a contrast ratio of at least 4.5:1. The holy grail "AAA" standard is 7:1. WebAIM makes adjustments for text size, and there are other details and nuances. If you want the whole story, check out this article.

By the way, higher contrast ratio is usually more visually appealing. If you’re old enough to remember the dawn of the internet, you probably remember lots of scary color combinations on early sites. They often had (in addition to other problems) low contrast ratios between text and background.

How to Check

Now that you know WHY you should check, let’s tell you how.

Use our handy color contrast checker tool to determine whether your text/background combination meets or exceeds standards.

Just input the hex color codes of at least two colors and the tool will generate a grid. Choose your desired rating and the tool will highlight those combinations meeting the chosen criteria.

Hex Color What?

I know, I know -- you're not a designer. So I just told you to input a hex color code and you might not even know what that is. Don't worry, I gotcha.

A hex color code is (again, oversimplified) a six-character alpha or alphanumerical value that tells a computer what color to display. It's sometimes preceded by a # sign, but that's not always necessary.

If you work for a corporation with a defined brand color scheme, those colors have hex color codes, which you should be able to find in your brand guidelines. For example, Amazon yellow's hex code is FF9900. FedEx purple is 4D148C. There are other ways to express colors, but our color checker tool uses hex color codes. 

Go Forth and Check

Now that you know better, you can do better. Don’t tolerate bad contrast. It's ugly. It's so 90s. And it's bad for your users.