In the Smashing Magazine article “An Accessibility-First Approach To Chart Visual Design“, authors Kent Eisenhuth & Kai Chang discuss how an accessibility-first approach led them down the path of creating a better visual design for charts.
The article includes info on the unique way the authors sidestepped the WCAG 2.1 color contrast requirement to improve the design of a chart:
“While WCAG recommends that all colors achieve a 3:1 contrast ratio with the white background, we found some ways to work within the guidelines yet use a broader range of values. Since we’re now using multiple encodings (e.g., color shades and box height) to communicate meaning, we realized our options opened up a bit.
To achieve the required contrast ratio, we added end caps to the top and bottom of each box. These end caps are 3px in thickness and achieve a 4.5:1 contrast ratio. We added subtle rounded corners to give it visual appeal and to ensure it fits within the aesthetic of Google’s Material Design system.
Since the end caps’ position varies, and they achieve the required contrast ratio, we could then apply a broader range of shades to the box fills to strengthen meaning and create a more appealing visual design. We could then use light tones that did not originally achieve the required contrast ratio. We can see an example of this in practice below. The addition of the endcaps was a clever way to ensure low-vision and colorblind users could still read the graph.”
Read the rest of An Accessibility-First Approach To Chart Visual Design here.
===
Instant Download!
Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.
===
