a11y: Ensure all themes for all diagrams pass WCAG contrast AA checks including dark mode #3691
Labels
Status: Triage
Needs to be verified, categorized, etc
Type: Bug / Error
Something isn't working or is incorrect
Describe the bug
Based on the comment made by @aardrian in #2732:
There are some themes and diagrams that fail WCAG contrast checks:
We need to ensure that all diagrams using _all_themes in both light (normal) and dark mode pass the minimal (AA) WCAG contrast checks.
There are tools that make checking this easy including Firefox dev tools (Accessibility section) and Chrome dev tools (Elements -> Accessibility).
It may make sense to split this up to a few smaller PRs -- perhaps 1 for each theme. It's likely that if there is a contrast problem, it is caused by the colors in a theme. Although it may be that some diagrams alter (e.g. lighten or darken) colors.
Need to check and fix all 12 diagrams for these themes:
"all 12 diagrams" = c4, class, ER, flowchart, gantt, git, info, pie, requirement, sequence, state
Refs:
https://www.w3.org/TR/WCAG21/#contrast-minimum
https://www.w3.org/TR/WCAG21/#non-text-contrast
https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
The text was updated successfully, but these errors were encountered: