humancompanion-usds
commented
2 months ago Notes from DSC
- Matt: TMF team is coming to work on this problem and put it into VADS. This is a very hard problem.
- Martha - Adjacent colors also have to have contrast against one another.
- Ryan: Agree, if those two blues land next to each other, I don’t think there would be enough contrast.
- Martha - Lightblue in a line chart would be too light against a white background.
- Martha - Hard to get this right.
- Martha - CAIA could help support this team to get a color combination and patterns that would work for this bar chart.
- Robin: What about patterned backgrounds? https://quickchart.io/documentation/chart-js/patterned-backgrounds/
- General support for using patterns in addition to color to help contrast of bars in the chart
- Matt: Yes, but be aware of Tufte's hated "Chart junk"
- Matt: (post meeting note) Not to throw a monkey wrench into this work but perhaps the problem is using color to distinguish parts of VA.gov. As Martha mentioned, it may be hard to come up with enough colors and/or patterns to distinguish. What if the chart itself were changed to avoid needing those visual elements to differentiate one section from another. Again, Tufte's books are a great resource. This Tufte-inspired re-design is worth reading as potential inspiration.
- Jeana: Yeah I wonder about wcag 1.4.1 https://www.w3.org/WAI/WCAG21/Understanding/use-of-color and how that applies here. “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
- Since a CSV is provided, maybe the criteria is still met
- Ryan: In past projects, (not VA, not as robust of an accessibility protocol, so take with a grain of salt), charts and graphs were essentially bypassed for accessibility so long as the data was provided in another format. So the CSV might be enough. I don’t know the exact rule or guidance referenced, if there was one.
- Robin: This site, iwanthue, has lets you choose a colorblind friendly color space
Resolution
- Martha and Matt to talk to Barnes about allowing for CAIA support for this work as it would be a useful seed to start from with the forthcoming TMF-funded team that will come on board next quarter to work on this very problem.
artsymartha68
What
Purpose
Usage
Behavior
Examples
Accessibility
Guidance
Collaboration Cycle Ticket
Your team
Research (optional)
The following screen shots show that these colors comply with visual accessibility needs
Code (optional)
Next steps
You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.
Submit requests to join an upcoming Design System Council meeting in #platform-design-system.
During the meeting, the Design System Council Working Group will evaluate the request and make a decision.
If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.