docs-creating-accessible-diagrams

What problem does it solve?

Standard Mermaid diagrams often fail WCAG accessibility standards, are unreadable for users with color vision deficiency (affecting ~300 million people worldwide), and lack consistent syntax rules that cause rendering errors, excluding key audiences from critical documentation.

Core Features & Use Cases

• Verified Accessible Color Palette: Provides a pre-vetted set of 8 color-blind friendly hex codes that meet WCAG AA/AAA contrast standards for both light and dark mode, eliminating the need for manual contrast testing.
• Mermaid Syntax Best Practices: Includes standardized classDef templates, comment syntax rules, and special character escaping guidance to prevent common rendering errors and ensure consistent diagram output.
• Use Case Example: When creating a product architecture flowchart for cross-functional stakeholders, use this skill to ensure all nodes are distinguishable for users with protanopia, deuteranopia, or tritanopia, and meet accessibility compliance requirements for public-facing documentation.

Quick Start

Use the docs-creating-accessible-diagrams skill to create a WCAG-compliant Mermaid flowchart for your new user onboarding process using the verified accessible color palette and standardized syntax rules.