Summary
Follow-up to PR #975, which introduced the WCAG 2.2 AA colour contrast validator and updated diagram standards (instructions/mermaid.instructions.md v2.0).
The validator found 36 contrast errors across the repository on first run — all caused by style X fill:#colour declarations without an explicit color property. In GitHub dark mode, Mermaid inherits white text, producing contrast ratios as low as ~1.1:1 against light pastel fills (WCAG AA minimum is 4.5:1).
Work Required
Sweep all 47 .md files that contain Mermaid diagrams and replace every old-style fill-only style declaration with an approved fill + color + stroke triple from the palette in instructions/mermaid.instructions.md:
| Role |
fill |
color |
stroke |
| Information |
#dbeafe |
#1e3a5f |
#1e3a5f |
| Success |
#dcfce7 |
#14532d |
#14532d |
| Warning |
#fef3c7 |
#4a2c00 |
#b45309 |
| Error / Alert |
#fee2e2 |
#7f1d1d |
#b91c1c |
| Documentation |
#f3e8ff |
#3b0764 |
#7e22ce |
| Neutral |
#f1f5f9 |
#0f172a |
#334155 |
| Highlight |
#ecfdf5 |
#064e3b |
#059669 |
Acceptance Criteria
Files to Update
Run npm run validate:mermaid-contrast to get the current list of affected files and their specific style declarations to fix.
Summary
Follow-up to PR #975, which introduced the WCAG 2.2 AA colour contrast validator and updated diagram standards (
instructions/mermaid.instructions.mdv2.0).The validator found 36 contrast errors across the repository on first run — all caused by
style X fill:#colourdeclarations without an explicitcolorproperty. In GitHub dark mode, Mermaid inherits white text, producing contrast ratios as low as ~1.1:1 against light pastel fills (WCAG AA minimum is 4.5:1).Work Required
Sweep all 47
.mdfiles that contain Mermaid diagrams and replace every old-stylefill-onlystyledeclaration with an approvedfill + color + stroketriple from the palette ininstructions/mermaid.instructions.md:fillcolorstroke#dbeafe#1e3a5f#1e3a5f#dcfce7#14532d#14532d#fef3c7#4a2c00#b45309#fee2e2#7f1d1d#b91c1c#f3e8ff#3b0764#7e22ce#f1f5f9#0f172a#334155#ecfdf5#064e3b#059669Acceptance Criteria
npm run validate:mermaid-contrastexits with code 0 (zero errors, zero warnings)npm run validate:mermaid-syntaxandnpm run validate:mermaid-accessibilitycontinue to passdevelopFiles to Update
Run
npm run validate:mermaid-contrastto get the current list of affected files and their specific style declarations to fix.