Access and Use the Accessibility Color Palette Generator

mySidewalk prides itself on providing report and dashboard tools that are accessible to everyone. We think designing for accessibility should be easier, so you don't have to be an accessibility expert to create something beautiful, accessible, and compliant with WCAG 2 AA guidelines.

The Accessibility Color Palette Generator brings knowledge and guidance on the most accessible color choices into one place for easy use.

There are three main features:

• the Typography Checker,
• Palette Generator, and
• Visualization Preview. 

About the tool

Use the color palette generator any time you are making design decisions about color.

This can include text or visualization color for your published report, dashboard or website.

Typography checker

The Accessibility Color Palette Generator checks whether there's a proper contrast between the color and background for

• headlines, 
• link colors, and
• colors used in a visualization. 

This check helps readers with vision impairments and/or color blindness.

Palette generator

When multiple colors are desired for a chart, graph or map, there need to be contrast considerations. If colors aren't distinct enough, folks may struggle to see the difference. A color ramp with multiple colors or a single hue will help you find appropriate colors to use.

Visualization preview

The visualization preview helps you see what the finished product will look like.

• This can help you make branding consistent across your materials
• It also takes into account the unique needs of data visualization.

How to use the color palette tools

Access

You can access the color palette generator from within a report or dashboard. Under the defaults tab look for the “Color Palette Generator” link.

Typography checker

This section offers our default suggestion for text color and link color. Adjusting the color choices on the left will update the example and the section on the right will indicate “pass” or “fail” based on the contrast of the color against a standard white background – informing you if the choices are WCAG AA compliant. Ensure both of your colors pass before moving on.

When you have two colors that are passing, you can copy the hex color code (#444444 in this example) and bring them over to the default colors in your Published Asset.

In mySidewalk, paste the headline hex code in the Headline Color box and the link color box in the defaults section of a report or dashboard to get the WCAG AA compliance!

Color ramp palette generator

This section offers a suggestion for a series of colors in a ramp that are visually equidistant. You can change the number of ‘bins’ or colors in the ramp depending on the type of color ramp you are creating. There are three choices in the generator: Multi-Hue, Single Hue or Divergent.

In Divergent and Multi-Hue, you can choose a start point and an end point for the palettes. In the Single-Hue, you choose one end point that is the darkest color on your gradient scale.

The output of the color picker is a preview of the ramp in a map. You can see if the colors are easy to visually separate from each other. You can also utilize the color blind preview to ensure the colors are different enough from each other to be distinct.

Once you have created the color ramp, you can use it to build a color group in mySidewalk. Go to the defaults page of a report or dashboard and choose Color Groups -> Manage Color Groups. From there you can build a new color group and copy/paste the hex codes from the palette generator.

Use the plus button to add the desired number of colors to the palette and give it a name. This can then be used in the report or dashboard as the default ramp of colors.