[Proposal] Paragon Label Colors Addition v2
Overview
Currently, the Paragon Design System has three color sets: brand colors, core colors, and utility colors. We are proposing adding a fourth set of colors to be used in cases where a color set is desired to help distinguish between objects in a set. The colors in this set are ordered to maximize (as much as possible) distinguishability between neighboring colors for the most common color blindness types.
This proposal has been updated based on feedback from various members of the community.
Key Use Cases
As a platform, I would like to have a set of x distinct ordered colors for users to use in specific use cases such as:
color coding assignment types
As a designer on the Open edX platform, I would like an accessible ready assortment of colors for design elements on the platform. Examples of this would be:
for visualizations within Aspects
for block types within Content Libraries
Proposed Color Set: Label Colors
The color set we are proposing has nine ordered colors. Each color has nine color levels corresponding to relative luminosity from 100: lightest, to 900: darkest following standard color system labeling. In standard color systems, the 500-level colors are typically the standard or base shade. Below in Figure 1 are the 500-level colors.
Below in Figure 2 are all the colors and corresponding levels.
Label Color Compliance Requirements
The colors and color levels in the color set were adjusted to meet the following requirements to comply with WCAG AA:
500-level color shapes have contrast >3.0 on both white and black backgrounds
500-level color shapes have contrast >3.0 on both 100-level and 900-level backgrounds
600-level color and above have a contrast ratio >4.5 with white text
400-level color and below have a contrast ration >4.5 with black text
Label Color Set Creation Process Overview
The nine baseline colors (500-level) were selected to span the color hue spectrum. We adjusted these baseline colors to match 500-level compliance requirements above. From there, we tested every color against all relevant requirements.
With the baseline 500-level colors, we then used various color blind filters to order the colors so that they are as distinct as possible for the most common color blindness types. This means, for example, if a color set of five is needed, the first five elements in the set should be as distinct as possible.
Label Color Use Recommendations
The following are usage guidelines for using this color set for text on various backgrounds, and shapes.
Shapes
For WCAG AA compliance, shapes must have color contrast ratios >3.0 against each other.
All 500-level colors have contrast ratios >3 with both white and black shapes
For each label color, color-levels 500 apart have contrast ratios >3 (ie: label-a-200 and label-b-700 have a contrast ratio >3)
Text
For WCAG AA compliance, text must have color contrast ratios >4.5 against their backgrounds.
All text of colors levels 400 and below are have >4.5 contrast ratios on black backgrounds
All text of color levels 600 and above are have >4.5 contrast ratios on white backgrounds
Usage Guidelines
This color set should be used as an additional way of visually distinguishing elements, but should not be the only method.
For use in data visualizations, any overlapping shapes should have a black or white border between shapes because all 500-level colors have acceptable contrast with white and black, but not among themselves.