Bug reportSep 10, 2026· 0:23· 14 views
Mermaid 11: sequence diagram rect fill has near-zero contrast in dark theme
0:23 total
Comments · 0
Be the first to comment.
Bug report— by SceneRecap AI
mediumthemes/sequenceDiagram
os: macOSbrowser: Chromium 151.0.7922.34viewport: 1280x720
Repro steps
- 1.Render a sequence diagram with a custom rect fill rgb(240, 248, 255) under theme 'dark'
- 2.Inspect the contrast between text inside the rect and the background fill
Expected
Text inside the rect should adjust contrast or maintain legible foreground color against the rect fill.
Actual
Text retains dark-theme light grey color rgb(184, 182, 182) on light fill rgb(240, 248, 255), resulting in ~1.9:1 contrast.
Evidence
visualDark theme sequence diagram renders near-white text over aliceblue rect fill (contrast ratio ~1.9:1 vs WCAG AA 4.5:1 minimum)
consoleDark rect evidence: rectFill rgb(240, 248, 255), textColor rgb(184, 182, 182)
visualControl case with default theme renders dark text on aliceblue legibly
Issue markdown (copy-paste ready)
## Summary In Mermaid sequence diagrams rendered with `theme: dark`, applying a light background fill (such as `rgb(240, 248, 255)`) to a `rect` element causes nested text to render in light grey (`rgb(184, 182, 182)`), resulting in an illegible contrast ratio of ~1.9:1 (WCAG AA requires 4.5:1). ## Repro Steps 1. Render a sequence diagram with `theme: dark` containing a rect block filled with `rgb(240, 248, 255)`. 2. Observe text contrast inside the rect. ## Expected vs Actual - **Expected:** Text color dynamically adjusts to dark text against light rect fills. - **Actual:** Text retains light dark-theme foreground, making messages inside rect illegible. ## Evidence - Overlay badge at 3.0s calculates contrast ratio at 1.9:1. - Default theme control at 15.0s renders dark legible text on identical fill. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →