MySidewalk prides itself on the ability to deliver dashboards accessible to everyone. While this is not an easy task in web design, our team is dedicated to the effort. We recognize there is a need to make designing for accessibility easier so every single person doesn’t need to be “an accessibility expert” to create something that is compliant with WCAG 2 AA guidelines.

We know the commitment each of you have to your own constituents and we want to continue to make things easier for you to publish and share. mySidewalk built the Accessibility Color Palette Generator to bring knowledge and guidance on the most accessible color choices into one place for easy use.

The Colorviz tool has three main features: the Typography Checker, Palette Generator and Visualization Preview. Below we will show you how to leverage these tools and the preview to continue to make all of your published assets WCAG 2 AA compliant.

You may use the color palette generator any time you are making design decisions about color. This can include text or graphic color for your published report, dashboard or website. The idea is to ensure that a proper contrast is in place for the color and background as it applies to headlines, accents such as link colors, and for colors that may be used in a visualization. This will ensure that readers dealing with vision impairments and/or color blindness can still access this information.

Additionally, when multiple colors are desired for a chart, graph or map, there need to be contrast considerations. If the colors are not distinct enough, someone may struggle to discern the difference between them. Using the color ramp with multiple colors or a single hue will offer guidance on appropriate colors to use.

Finally, the visualization preview gives the author of this content a good idea of what the finished product will look like. This is helpful when branding considerations are important as well as general education for how a reader might experience your information.

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

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!

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.