Think about it, count the number of times you were not sure about the exact tone to use for text to satisfy accessiblity on a screen. Now, think of all the times you needed a lighter tone for a color but lacked knowledge to make the addition. Or those times, you needed a new wash to differentiate between components on the screen.

It is more than likely, that at some point a designer is unsure of a product’s colors. Every time the designer thinks twice about color, the need for a system increases.

The Need for a System

Is your product used by more than a dozen people?

Is the product growing in features?

Is your team growing?

If the answer to the above is a resounding yes, then your team needs a system.

The Essentials

What makes a good color system? There is no definitive answer to this. The interface requirements of today are bound to change with the advent of AR/VR experiences. For the time-being, I say a good color system should be:

Accessible

Systematic

Scalable

Accessibility

Accessibility should be the cornerstone of a color system.

Complying to WCAG

Web Content Accessibility Guidelines (WCAG) 2.0 help make the web more accessible to people with disabilities. Accessibility addresses a wide range of disabilities; visual, auditory, physical, cognitive, and more.

Section 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA).