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 palette is desired to help distinguish between objects in a set. The colors in this set are ordered to minimize confusion for certain types of color blindness.

Key Use Cases

• As an instructor, I would like to have a set of x distinct colors to use to distinguish objects of a set.

• As a designer on the Open edX platform, I would like an accessible ready assortment of colors for design elements on the platform.

Usage Examples

Below are possible examples for how this color palette can be useful. For both these scenarios, use of the proposed color palette will allow designers to quickly select colors that have already been tested for accessibility concerns.

Visual Distinction for Assignment Types

The impetus for the creation of a color palette was a desire to distinguish between assignment types in a course using color. For work done on the Visual Course Progress and Course Content Views projects, we wanted to supplement the distinction between assignment types (ie: homework, labs, etc) that would allow learners to quickly discern assignment types, but also be able to understand better a compound progress bar for grade progress as pictured below in Figure 1:

Open

Figure 1: Progress Card

In addition, we wanted to make sure that the colors we selected would be distinct from the current Paragon stylings to avoid confusion (ie: one of the assignment types is blue, but this blue will be distinct from the blues currently defined in Paragon for “info” and “accent”).

Color Selection for Content Block Types Within Studio/Libraries

When content libraries grow above a certain size, it can become difficult to quickly identify components/ find the correct blocks. To improve skim-ability of libraries, content blocks types each have their own colors. This proposed color palette will help in the selection of colors for content types without necessitating accessibility checks as this work has already been done.

Proposed Color Palette

The proposed color palette we are proposing has nine baseline colors, each with nine levels (shades). Below in Figure 2 are the 500-level colors used as a baseline.

Open

Figure 2: Proposed Color Palette Baseline

Below in Figure 3 are all the colors and corresponding levels:

Open

Figure 3: Proposed Color Palette, All Levels

Color Selection Process Overview

The initial colors were selected to have matching perceived brightness. We used the CIELAB color space to select a baseline of nine colors. The selected colors should be distinct from colors already in the Paragon Design System (brand, core, and utility colors).

With this baseline of nine colors, we then used various color blind filters to then order the colors so that they are, in order, as distinct as possible for the most common color blindness types. If a color set of five is necessary, the first five elements in the set should be as distinct as possible.

Open

Figure 4: Color Palette Filtered by Different Color Blindness Types

With these nine baseline colors, we created a spectrum of nine different levels. Colors of the same level all have the same luminescence and have similar perceived brightness levels.

Usage Limitations

We would like to note that color should not be the only method of distinguishing between elements in a set. Labels or other cues should be the main method of distinguishing among elements of sets, and color should be used in addition to those methods.

Open Tasks

Accessibility Tests

Color levels 500 apart should pass WGA color contrast tests for shapes. For example, an object with background color3-700 with an object with color3-200 should pass contrast tests.

For text, color shades below 400 all pass contrast tests as backgrounds behind for black text for light mode themes. Color shades above 600 all pass contrast tests as backgrounds behind white text for dark mode themes.

Once there is some level of alignment within the Open edX community and relevant working groups (Paragon, UX/UI, Product), we will complete all necessary accessibility tests and adjust the color palette as necessary.

Use Case Definition

Besides the two use cases outlined above (assignments distinction, content block distinction), we would like to understand broader needs for a color palette. This will help us identify what types of accessibility concerns may be relevant, and better recommend limitations of use.

Technical Open Questions

We anticipate the following to some of the key questions that we will need answered during technical discovery.

• Q1: