2+3 Functional Color Zones: An Idea for Guaranteeing* Accessibility Through Theming
Recently I have been getting ready to kickstart an open source react component library project I named as Vinyl to teach myself some development skills as well as going deeper as a designer. This article comes directly out of the documentation for theming and it focuses on answering the question of how to maintain accessibility in a theming system based on the HSL color system. Caution: To make the idea understandable for all levels, I will explain some points starting from the big bang. ☄
Vinyl uses HSL color system to create a harmonious and consistent document color palette and theming options. HSL color system helps you to define the presets of saturation and lightness values for each hue you want to include. This guarantees to have a consistent and harmonious palette and theme options. However, if you also want the same consistency and moreover accessibility for the text colors over your color palette, this system does not assure it at all.
To help maintain accessibility in the majority of the cases, Vinyl works on a solution named as 2+3 Functional Color Zones. (It always sounds cool when you give complex names into things. 🤓)
Think that you have a color ramp of 10 steps. Firstly, divide this 10 step color ramp into 2 zones as Zone 1 and Zone 2. The function of Zone 1 is to be the default color ramp and the Zone 2 is the inverse color ramp.
Each step in Zone 1 follows an HSL arc for saturation and lightness and Zone 2 follows a different HSL arc among its steps which does not always aim to create a smooth transition from Zone 1. All the different hues which fall to Zone 1 will follow the HSL arc for Zone 1 and the same hues which fall to Zone 2 will follow the HSL arc for Zone 2.
The second step is to divide each Zone in itself by 2+3. At this point, we name the colors with the name we give to a hue and the degree it has such as purple-10, purple-20 and so on, beginning from the first step until the end to step 10.
The first step, name it purple-10, is the default background color of the purple theme, purple-20 is the field color, purple-50 is the main UI color, purple-40 and purple-30 are the UI state colors. The same functionality is also valid for the Zone 2, in which the purple-100 is the inverse background, purple-90 is the inverse field, purple-60 is the main inverse UI color and purple-70 and purple-80 are the inverse UI state colors.
This usage of a color ramp is not new, however, one distinctive point here is, the color ramps are generated with WCAG 2.0 conventions in mind to provide the minimum color contrast ratio of 4.5:1 or AA level between the background color and the main, inverse and themed text colors (which is equal to the primary UI color in a theme for us in Vinyl project.)
As explained above with 2 different arc models, you can realize that actually, they don’t follow an even arc which would eventually maintain a smooth transition between the steps in a ramp if it’s done that way.
And here comes the question: Does the 2+3 Functional Color Zones model really guarantee accessibility with whatever hue you apply to the pre-set saturation and lightness values? The answer is a conditional YES,
1- If you use the xcolorname-50 as a text color over the xcolorname-10 background color and xcolorname-20 field color.
2- If you use #fffff as text color over xcolorname-30, xcolorname-40, and xcolorname-50 until xcolorname-100 (Zone 2).
What happens if you don’t want to use the combinations above? Well, as Vinyl doesn’t limit you to use a certain text color over a certain background color for now, this may result in accessibility failures. However, we consider working on an algorithm to automatically roll up any text color over a given background to the minimum contrast ratio of 4.5:1 for regular text. But this can also end up in failures in terms of creating a delightful design and it may make the Vinyl library unavailable for the users who already have brand guidelines. 🤔
Besides being one of my favorite songs (👋 Lianne La Havas), green and gold have another meaning for me as they have been among the most problematic colors when I don’t want to change the text-color usage formula and keep up with accessibility rules.
So, here is the NO answer to the question above: The default presets used by Vinyl do not maintain accessibility for green and gold colors. The solution approach is to keep using the 2+3 Functional Color Zones model as the frame but applying different saturation and lightness values separately for hard colors such as green and gold. The presets used for green and gold are reflected as shown below. These two presets can also be tested for usage with other colors in cases your selected hue does not main accessibility with the default preset.
It’s not the case always that you’ll need to use all the colors in a ramp. As I also did for Vinyl, just decide on what you need and set the document palette accordingly. To cut it short, the image below shows what type of colors and which values I picked from the ramps I created with the 2+3 Functional Zones model:
And it’s reflected on the code as shown below:
To make it clear again; primary, secondary, info and danger colors follow the default and default inverse presets, however success and warning colors follow the AccessibilityOne and AccessibilityTwo presets subsequently, as discussed on the previous lines.
And here is the main text colors applied to the document. Contrary to the themed text colors (remember xcolorname-50) which are defined by the saturation and lightness values of the preset it uses, document main text colors are stated separately.
On the design level, main text colors above follow the monochrome presets. However, to enable the user flexibility for the favor of accessibility, we didn’t create any configuration to align the main text colors and the monochrome preset.
In our tests, this theming frame proves very well, but of course, I need to underline the fact that it can not guarantee accessibility 100%.
If you have any other idea or you want to contribute to this project, just drop your comment below.
Thanks for reading so far. Please keep following my posts as I plan to release the first version of the Vinyl React component library in the upcoming days and there will be a ton of points to discuss together — not only theming!
2+3 Functional Color Zones: An Idea for Guaranteeing* Accessibility Through Theming
Research & References of 2+3 Functional Color Zones: An Idea for Guaranteeing* Accessibility Through Theming|A&C Accounting And Tax Services
Source