search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.54k stars 6.48k forks source link

a11y: Ensure all themes for all diagrams pass WCAG contrast AA checks including dark mode #3691

Open weedySeaDragon opened 2 years ago

weedySeaDragon commented 2 years ago

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

sobitp59 commented 2 years ago

Hey! I would love to do this. Can you please assign me this?

sidharthv96 commented 2 years ago

Hi @sobitp59, you don't have to ask for issues to be assigned.

All issues without Open PRs are up for everyone. :)

brennanyoung commented 1 year ago

Guidance note: If more than one color scheme is available to end users, only one of them needs to be compliant with these color/contrast SCs, as long as users can perceive the switch back from the non-compliant version.

Ideally, "all" of the color schemes will be compliant, but in practice there can be some contradictory requirements in this space, where some users find very high contrast difficult to use, and prefer low contrast. Human vision is very diverse.

Also WCAG level AAA has even stricter requirements about contrast. Would be good to have a couple of those too.

How about offering a few color schemes that are WCAG level A/AA compliant, maybe a couple that are AAA compliant?

In the worst case, any that don't get "fixed" can remain as long as the compliance levels are clearly indicated.

Is there an obvious way to indicate these compliance levels? Docs?

brennanyoung commented 1 year ago

FYI Windows High Contrast Mode (often "HCM") is a very popular assistive tech that converts the display into a high-contrast version at the host-system level. I am mentioning it here because HCM is likely to come up in this context.

HCM works ok, but there are often problems displaying content that has no stroke/border. CSS background images used as "real" content are also unlikely to display in HCM. Hardware accelerated video also fails to appear on some browsers.

WCAG does not require compatibility with Windows High Contrast Mode but to be a good citizen, make sure anything important (i.e. meaningful charting elements) has a non-null border/stroke width.

A transparent color value for border/stroke will not be visible until HCM is enabled, after which the border/stroke will be drawn in the foreground color.