Building Blocks

To build this color system on a strong foundation, we need our essentials cemented into the building blocks listed below:

  1. Tone scale
  2. Naming
  3. Hues
  4. Tone development
  5. Guidelines to scale

Tone Scale

A good start to an accessible color system is the tone-scale. A scale allows the color system to be flexible, and adds consistency to the product’s expression. It is important for the scale to have enough steps that it allows for improved usage when designing an interface.

My approach to determine the tone-scale was to start at the mid-point and find a middle-tone for Grey. Thereafter, I extended that tone to both extremes by adding a tint/shade to it, in 20% increments. This results in a scale with 11 tones, and 10 steps, as shown below.

A grey tone-scale extended from white–black, middling at #757575.

As your inquisitive minds might deduce, the tone I set as the mid-point (#757575) is not the perfect middle-grey in the sRGB color space, which is #808080. Why is that you may ask? In response, I ask, what actually is middle-grey? As with everything in life, there’s hardly ever a definitive answer. Ultimately, dependent on the color model followed, the mid-point for each will differ in tone.

Middle-grey as defined by 3 different color models.

What model should I follow? As mentioned in the first article, accessibility will be the cornerstone of this system. That is the reason why I did not follow any of the tones above and went ahead to find one that satisfies our criterion of accessibility.

I wanted a tone that will cut right in the middle to allow symmetrical accessibility served on either extreme: white or black.

Grey-50 produces a contrast ratio of 4.6:1 on both absolute white and black. Calculated using CCA.

Grey-50 at #757575 achieves a contrast ratio of 4.5:1 or higher, when in use over either white or black. This complies with Level AA of the WCAG accessibility standards for minimum contrast.

The 10 step scale leads to a very cool side-effect. Any 2 tones with a 5-step gap will result in a contrast ratio of 4.5:1 or higher.

Every 5-steps produce a contrast ratio greater than or equal to 4.5:1.

This adds a strong layer of predictability to the system.

Naming

The 11 tones generated earlier, map logically to our numerical naming scheme, ranging from a weight of 0–100. Since the tones also include white, and black, we can eliminate those out for 9 tones of Grey in total. This results in a scale that ranges from 10–90 for each palette.

With the 5-steps to accessibility, we now have a clear and logical system through which we can determine what tone to use for text/icons on different background .

For example, if I use Grey-10 for the background, I know that Grey-50 will not pass the contrast ratio test, as it is only 4 steps from Grey-10. Thus, the closest accessible tone is Grey-60. Similarly, on a dark background of Grey-80 let’s say, text set in Grey-30 will be accessible.

The important lesson here is that when we make our products more accessible, we are not only making them usable for people with disabilities, we are also improving usability for everyone else.

Apple Music | left: original app colors, right: tweaked elements passing Level AA.

Hues

Defining the hues is paramount. This task will be directly dependent on the needs of the product. Color systems usually consist of one primary hue, with other supporting hues to add flexibility so it can cater to a variety of states and functions.

Gestalt’s principle of similarity states: things which share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together.

To develop a scalable color system, it is important to ensure that a single color hue remains unmodified when generating tones.

When the hue is constant, variations in lightness or saturation will create monochromatic harmony. Colors also harmonize if they are of the same lightness and saturation, regardless of hue. This is called nuance harmony.

Colors possess another property, pertinent to our exercise; this is called luminance.

Luminance

Luminance is the perceived brightness of a color. As a simple observation, blue will always look deeper than yellow. Let’s convert the complete range of hues to a luminance scale to see this more clearly.

hue vs luminance

We can see that every hue has a different perceived brightness. To normalize this we can add/subtract luminance to/from each hue so it matches the luminance of our middle grey tone #757575.

Luminance normalized to grey-50

Carrying out this exercise is a good step, but we quickly realize that WCAG calculates contrasts differently for different hues. Just as Grey-50 works both on a black or white background, a color with luminance matching that grey will not. It fails the contrast test and thus we need to tweak it to find a tone which passes. We will come back to this once once the hue selection is made.

Selection

I have picked the following 5 hues for the color system:

Hue wheel displaying the Degree º for the hues selected.

In clockwise order from the wheel: Red (0º), Yellow (43º), Green (99º), Blue (204º), and Purple (296º).

There is no particular reason to select these values. These are based on personal taste, needs of the system, the product, and ultimately, the user.

Once we have made the selection, we need to create tones and name them in accordance with our scheme, just like we did for Grey.

It is important to first find the middle-tone which will essentially follow the same principle set in this system. It needs to have a contrast ratio of 4.5:1 or higher, in use, both over white and black. This step is made easy by Colorable. It is an amazingly simple website developed by Brent Jackson, that allows you to develop tones using the HSL color system, and displays their contrast-ratio for the selected background color in real-time.

First, I developed the middle-tone for the selected hue for Purple (269º) by setting the saturation at 1.00 and lightness at 0.50. When we check the contrast-ratio on both white and black, we realize this tone is far from the middle we are looking for.

As a test, I restricted this Purple to a luminance matching Grey-50 to develop the 2nd tone, and realized that too fails the contrast test on a white background. This proves that the WCAG take into account the hue and also the saturation for a tone when determining its contrast over a background.

Therefore I played around with the saturation to determine a tone which wasn’t overly vibrant, and then moved the lightness slider till I found a value where the tone passed Level AA on both white and black backgrounds.

I extended this exercise to all the selected hues and locked Tone-50 for each.

Now that we have our middle-tone for each hue, we can generate a complete palette by developing the other tones as we did for Grey.

Tone Development

The steps that have been taken with regards to building a color scheme, have proven to be fairly simple and easy to put into practice. Having said this, tone generation on the other hand is a task that is mostly subjective to the system’s requirements.

As an example, if you are building a source code editor like Microsoft’s Visual Studio Code, you may not need a lot of tones for each hue but you will need a lot a variety of hues to differentiate between coding elements.

A screenshot of Visual Studio Code.

Comparatively, if you are building a product like Sketch, the opposite will hold true. Your system will include fewer colors, for which, the tones generated for interface wash will need to work in very specific ways.

For the purpose of this article, we will not go into the needs as much as the actual techniques you can use to accomplish this task.

There are a few techniques that allow predictable tone development.

Tint and shade

Tint is produced by mixing a hue with varying amounts of white, whereas a shade is produced by mixing it with black. This is exactly the method I used to develop the Grey tone-scale. To generate 11 total tones starting from the middle (Tone-50), I progressively mixed 20% white/black to it. Let’s apply this method to find tones for Purple.

Tone developement using the tint and shade method.

Note that when I mix white or black to a tone, it is not just making it lighter or darker, it is also reducing the saturation of the developed tone. This happens because white and black, have zero saturation.

Tones generated using this technique still pass a contrast ratio of 4.5:1 or higher for every 5 steps.

Using a swatch generator

There’s an even easier way to develop tones. Thanks to David Johnstone, I can simply input a hue, black, and white. and have the website generate a defined number of swatches spanning those 3 tones. In my case, 11 tones in total.

David Johnstone’s Lch and Lab colour and gradient picker.

Additionally, this website gives you a way to compare how tones are generated from hues in different color models. Notice how the tones in the HSL model retain their saturation in the deeper end towards black. You will also notice that tones in the Lch color system maintain a better saturation gradient throughout.

Although it does look like it is producing a better looking gradient, the Lch color system fails to maintain the hue value throughout the different tones. For user interface design applications, monochromatic harmony is more important than how gradual the tones look stacked up together.

Tone development based on contrast

Since I wasn’t entirely happy with the output of both the techniques illustrated above, I decided to try a different one. To generate tones based on contrast, I used Colorable.

Colorable allowed me to input my middle-tone as both colors and then simply move the lightness slider up or down to find the next tone on the scale that had a contrast ratio of approximately 1.35:1.

There was some trial and error involved in order to find a contrast-ratio value, that if used to divide between tones, allows 11 tones ranging from white to black.

Using colorable to find successive tones from Purple-50, through modifying the lightness slider to a contrast of 1.35:1.

Utilizing this technique alone was not satisfactory enough. It required another step. I was not happy with how vibrant or dull a few tones looked, so I manually tweaked the lightness and saturation sliders for those tones whilst maintaining the contrast-ratio. This still enabled the approach to remain systematic, while allowing needed flexibility in the color system.

Below is the Purple palette as developed using all 3 techniques. Can you tell which one is which?

Comparison of the Purple palette using the 3 techniques mentioned.

Once I developed all the tones I repeated this exercise for each hue to develop the palette you see below.

The Palette

In the final palette I created using this approach, you can see all the different tone-scales maintaining monochromatic harmony. Additionally, every tone is able to maintain nuance harmony.

Although the accessibility of colors is essential in the overall effectiveness of the system as well as the design in question, it is essentially only one aspect of the overall design process. There are various other elements that need to be deemed accessible to ensure that the color system is ultimately adding value.

The accessibility guidelines primarily target text within the interface; it should also apply to iconography dependent on the stroke width of lines.

Moreover, it is important to note that targeting Level AA means that we are optimizing the system for applications where the text displayed is smaller than 18pt or 14pt using a heavy weight. Subsequently, a thinner typeface might actually need stronger contrast to be accessible.

Guidelines to scale

The system can now scale systematically. Let’s assume we need more tones for Grey between White and Grey-10, because the interface demands a layout with different core components needing visual depth. Using the tinting technique, we can easily add more tones to the palette.

Developing 4 new tones between White and Grey-10 using the tinting technique.

There are times when products require illustrative work, or other elements on screen that require use of specially vibrant colors to make something pop, or to grab swift attention of the user. The system has the scaling capacity to incorporate such accent colors as of an alternative palette.

Using the same numeric scheme, based on contrast-ratio, we can develop more saturated tones for a select hue. This will allow for them to sit neatly within the palette, retaining it’s ease of use for the designer, as it will conform to the guidelines of the system.

We can develop accent tones and simply add a suffix to our naming scheme, such as Purple-40A, where A stands for Accent. This tone of purple should generate the exact same contrast-ratio as Purple-40.

Developing Purple-40A, as an accent color for an alternative palette.

Similarly, we can add a new hue to the system by taking the same steps for tone development as we did above.

Conclusion

These musings are from my second stop up top the steep mountain of Color. There is still much to learn. I will appreciate fellow designers sharing their with colors and the steps they took to overcome problems in the digital-space. There is no better way to learn than to practice, and I will recommend every budding designer looking to create a system to experiment and to practice these techniques and discover solutions relevant to their problems. I will continue my journey into color, and see where it takes me next. Till I venture towards my next stop, build better systems, and most importantly, have fun doing so.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here