Accessibility: Mermaid diagrams frequently violate WCAG colour contrast requirements
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
Does this issue occur when all extensions are disabled?: Yes
- VS Code Version: 1.130 (I delay updates intentionally for stability reasons, but have reproduced on newer versions too)
- OS Version: NixOS 26.05 Yarara
Steps to Reproduce:
1. Open a Markdown document
2. Create a Mermaid diagram
I have found that many aspects of Mermaid diagrams are inaccessible to the point of unreadability (even for me, someone without vision impairments), across many built-in themes. I am unable to read mermaid diagrams in VS Code as a consequence of this poor accessibility.
For example:
````md
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
````
### Theme "Dark 2026"
For the seuqnece diagram activation bars, WebAIM reports a contrast ratio of 1.21:1.
### Theme "Quiet Light"
Text has a contrast ratio of 1.09:1.
### Theme "Light 2026"
The text is white-on-white.
Contributor guide
Assessment
This issue has not been assessed yet.