My struggle with colors
Demystifying colors for accessible digital experiences
Color as an instrument
Today, we spend most of our time drowsed in digital experiences. All products we come across today utilize color as a primary instrument.
As a designer, building products everyday helped me realize how problematic colors are without a system. Their value diminshes if their application results in constant headaches and confusion. This slows down product development as it directly impacts design efforts. It also reduces the product’s consistency across different mediums for the intended user.
A typical symptom of a disorganized design system is finding multiple tones of your product’s primary color.
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).
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Compliance with WCAG section 1.4.3 ensures that the system allows confident usage, without the reliance on manual contrast checks using third-party tools. For any new designer, getting started with the product should be effortless.
Systematic Approach
Utilizing a systematic approach towards color reduces, yet does not eliminate subjectivity. This is due to the innate nature of colors. It is essentially our brain interpreting different electromagnetic wavelengths that are undoubtedly distinctive for each one of us.
HSL (Hue, Saturation, Lightness)
For a designer, the real identity of a color should be the Hue.
Throughout this article we will determine colors using the HSL color system. HSL stands for Hue, Saturation, and Lightness. I have illustrated this system by adapting the Munsell color system diagram as shown below:
If you wish to read more about how different color models work, this wikipedia article has more detail: https://en.wikipedia.org/wiki/HSL_and_HSV
The HSL model makes it easy to develop different tones for a selected color. For any one color, take purple for example, all we need to do is decide on a hue. And then we can adjust the lightness to develop select tones to create a palette. Saturation plays a big role in how harmonic different colors look, but is relative to how I create a color system.
Naming Colors
Although, creative and original color naming is most certainly practiced, it is recommended for usability purposes, that color naming is reasonably universal. Color names should be systemic and scalable; for instance, we can rely on established practices and set a scheme which is easy to understand.
I divided the hue-wheel into 12 brackets and named them as following:
Based on the color brackets above and inspiration derived from typefaces, specifically elements such as the font weight, it is most certainly possible to create a corresponding, effective numerical system for different colors. Similar to how different font weights use numerical values; e.g, 100, 200, 300, 500, 700, 800… as a distinguishable feature, we can also use numeric values for different tones. These numbers will thereafter, correspond to how light or dark a tone is.
Using a scale from 10–100 with a tone at each ten is by far the simplest. A purple-10 will understandably be the lighter tone in comparison to a purple-50. The familiarity of such an approach allows the system to grow predictably.
Scalability
Following the approach above, results in a color system that is scalable. Any new hue addition is now systemic. We can now name any hue using the brackets shown above and then name each tone relative to the lightness used to develop it. If there is need for more tones for a color in the future, the numeric system will be able to accommodate it. This is illustrated below:
Every color will be easy to name, remember and reuse.
Applied Learning
In Part II of this article I will apply all these practices and create a basic color system that is accessible, systemic, and scalable. I will delve deeper into how different techniques can be used to find tones and to create a coherent palette of colors.
I will also show examples of that color system in practice and compare it to interfaces built without accessibility in mind. Having said this, it is pertinent to our times, when shots on Dribbble reign supreme as portfolio pieces and users suffer every day at the hands of genuinely good designers, running amok with their limited knowledge of color and accessibility.
This is the beginning of my journey into colors. There is much to learn. I will appreciate rebuttals, engaging commentary, and comments that can propel me forward, or pivot me towards a better understanding of colors in the digital realm.
Ultimately, the primary reason for writing this article is to share my findings with my immediate community.
Part II of this article will be published soon.
Special thanks to Noor for helping me proof this. And shoutout to my colleagues at KeepTruckin. ❤
