microsoft / microsoft/vscode

Accessibility: Mermaid diagrams frequently violate WCAG colour contrast requirements

Open
#328,924 3 comments 1 reaction 1 assignee Claimed by @meganrogge View on GitHub
accessibility
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"

Image

For the seuqnece diagram activation bars, WebAIM reports a contrast ratio of 1.21:1.

### Theme "Quiet Light"

Image

Text has a contrast ratio of 1.09:1.

### Theme "Light 2026"

Image

The text is white-on-white.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.