My struggle with colors, part II – UX Collective

Building an accessible color system from scratch.

Zain Adeel

In part I of this article, I talked about the need for a color system for digital products foreseeing growth. I declared a good color system to be: accessible, systematic, and scalable.

Let’s recap these essentials.


It is essential to follow the Web Content Accessibility Guidelines (WCAG) 2.0 and target Level AA for section 1.4.3 so that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1.

This will allow the system to be used with confidence and in turn improve the general usability of the product.


In order to reduce subjectivity it is important to utilize a standard for tone generation, such as the HSL color model. In the previous article I illustrated a breakdown of the natural hue wheel into 12 brackets to be used in conjunction with the numeric weight system to name tones.


Scalability will become an emergent property of a color system which practices standardized naming and tone generation techniques. This will allow the system to scale with predictable growing needs.

Author: Zain Adeel

Collect by: