Enhanced Color Palette and Documentation for Design Guidelines

[lil-kim]

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[ X] enhancement

Documentation begins:

The Clarity color palette is a full spectrum of bold hues and neutrals to meet all your design needs.

The Clarity color palette

The Clarity color palette is aligned with color use in web applications and support for accessibility. The colors below constitute the expanded color palette for Clarity. Text colors displayed in light or dark tints represent Clarity's recommended accessible pairing with the color.

Base, Primary and Secondary Colors

The bulleted color swatches indicate colors that are part of the Clarity base color palette. You will find these colors in use throughout Clarity's components and design recommendations.

The large color swatches represent Clarity primary colors, recommended for use as the main color for your design. The remaining colors are considered secondary. They may be used for charts, graphs, illustrations and other areas that call for color accent.

---full palette goes here--- ---end full palette---

Color Usage

Base Colors

Colors used in Clarity's components and design recommendations.

• Neutral colors are for text and backgrounds.
• Action colors are for clickable items, such as buttons and links. Action Blue is reserved for buttons and links.
• Stoplight colors are for indicating error conditions, warnings, and successes. Significant colors include: Stoplight Green for positive actions; Stoplight Red for warnings and errors.

Choosing Colors

Text Contrast

Each color swatch in the palette is labeled with a black or white letter A to indicate its accessibility on the background color. Other text colors should be tested for contrast using an online contrast checker to make sure it passes the WCAG AA requirement for accessibility.

Charting Colors

The large secondary palette allows for distinguishable markers in charts and graphs. With charts, it’s important to choose colors that have clear contrast for easy readability. The more colors that are used, the harder it is to distinguish each marker. For this reason, we recommend a maximum of six colors per chart.

Colorblind Accessibility

It’s a good idea to test the color scheme you plan to use with a colorblind simulation app, such as Color Oracle. Alternatively, Adobe Photoshop and Illustrator come with a colorblind proofing view. You can use the simulation to adjust your color combinations to be accessible. In the example below, the image on right simulates how a person with colorblindness (Deuteranopia) would see the image on the left.

Some examples of color pairs that are difficult to distinguish for those with colorblindness:

---table is here only to show 2 column layout---

If these combinations can’t be avoided, leverage use of light and dark values. For instance, Red and green both appear as brown to someone with red-green colorblindness. But a light green paired with a dark red would be distinguishable in value.

Using light and dark values also helps in showing a clear division between fields. Follow a pattern of alternating placement of light and dark colors. A simple way to ensure sufficient contrast is to use a palette that is monochromatic.

Create contrast by using a range of light and dark values.	Use a palette with colors of similar values and saturation levels.

---table is here only to show 2 column layout---

Basic Tips

Avoid the temptation to use color as decoration. Colors should be used meaningfully to support the purpose of the chart.

• A monochromatic palette is a great place to start. It ensures contrast in values and doesn’t distract the user with a clashing color combination. If more colors are needed add a neutral or almost neutral scale.
• When using multiple colors, select one as a main color, then choose some supporting colors-complementaries, analogous or neutrals.
• Complementary combinations such as blue and orange or yellow and purple work well together aesthetically. Analogous colors - colors next to each other on the color wheel - such as blue and green also look nice.
• Test your colors for accessibility with a colorblind simulator.
• Test your text and background color for accessibility with an online contrast checker.
• Avoid using your project’s primary color or Clarity base colors in charts or graphics, e.g., the blue bars in your bar chart should not be the same blue as the primary buttons.
• Optional: Choose a palette from the color scheme examples.

Color Scheme Examples for Charts

These color schemes are designed to address contrast and colorblind accessibility. Feel free to use them just as they are or as a starting point for a customized palette.

Monochrome + neutral

Multicolor

Charting Example

---Example image goes here---

---End of design guideline---

Attachments

Layout in Sketch, Individual pngs to accompany doc png imgs for doc.zip color palette layout.zip hex nos.pdf.zip

^ All images for doc are included in "imgs for doc.zip" ^ See the color palette layout for guidance on layout ^ Use Hex nos.pdf to easily copy-paste hex numbers

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.