Quickly Test Color Combinations for Better Contrast

Andre — Mon, 23 Sep 2019 17:31:01 +0000

Introduction

Early on in my current job, I built a large number of budget sites for clients. The websites used premade templates, so there was not any room to be creative there. However, being constrained to a small list of template layouts pushed me to be more creative in a different way. The constraints led me down the rabbit hole of color schemes and themes. Throughout this process, I found several useful tools and tools on the subject of color choice in web design.

The Problem

Most of the time, clients at that price range did not have a brand color, let alone a style guide. It was up to me to quickly find a color combination for their site. Picking the right color is tricky. If you are not careful, you could choose a font color that was hard to read. What I learned from these budget projects was the importance of proper contrast. The builds were repetitive, and I saw room for speeding up the process.

The Solution

Initially, I used the material color tool to test color combinations. However, I found Colorable to be much faster and easier to use for testing color combinations. This tool removed all of the guesswork involved in making sure my text color is legible. I found it particularly useful for creating the color theme of this blog. Be sure to star the original author's repo on GitHub.

Why is Good Contrast Important?

Text with bad color contrast is hard to read, and people won't want to read it. Unreadable copy increases bounce rate. Part of the population is visually impaired. Colors that have high contrast allow your site accessible to a broader audience. This tool introduced me to the WCAG color contrast guidelines. I now keep these guidelines in mind whenever I am working with text.

What's the deal with all the As?

The AA and AAA you see next to the contrast score are part of a contrast scale outlined by the Web Content Accessibility Guidelines (WCAG).

A simplified overview of the guidelines:

Fail: score of 3.0 or lower unreadable
AA Large: 3.01-4.4 readable with larger font sizes
AA: 4.5+ acceptable for the majority of the population
AAA: 7.0+ almost universally accessible ideal for long-form text and articles

How do I use it?

First thing you are likely to notice are two hexadecimal color codes. One for text, one for the background. You could manually change the hexadecimal values, but I don't recommend that approach. Below that, you have three sliders:

Hue uses the 360-degree color wheel to determine the color.
Saturation determines the intensity of your color, on a scale of 0 to 100
Lightness determines how bright you're color will be. Zero is black, and 100 is pure white.

Now that you know how to use this tool. What surprisingly awesome color combinations have you discovered using tools like Colorable?

This was initially posted on Cosmic Division, my JAMstack Dev Blog