docs-creating-accessible-diagramslisted

# Color Accessibility for Diagrams This Skill provides guidance on creating accessible Mermaid diagrams using a verified color-blind friendly palette that meets WCAG AA standards. Use this when creating visual diagrams to ensure accessibility for all users, including those with color blindness (~300 million people worldwide). ## Purpose Use this Skill when: - Creating Mermaid diagrams, flowcharts, or visualizations - Working with color-dependent visual content - Need to ensure WCAG compliance for diagrams - Supporting users with color blindness (protanopia, deuteranopia, tritanopia) - Choosing colors for documentation, diagrams, or UI components ## Verified Accessible Color Palette **CRITICAL**: Use ONLY these colors in all diagrams. This palette is scientifically verified to work for all color blindness types and meets WCAG AA standards. | Color | Hex Code | Use Cases | WCAG AA (Light) | WCAG AA (Dark) | | ------ | -------- | ------------------------------ | ---------------- | ---------------- | | Blue | #0173B2 | Primary elements, main flow | ✅ 8.59:1 (AAA) | ✅ 6.93:1 (AAA) | | Orange | #DE8F05 | Warnings, decisions, secondary | ✅ 6.48:1 (AAA) | ✅ 5.24:1 (AAA) | | Teal | #029E73 | Success, validation, tertiary | ✅ 8.33:1 (AAA) | ✅ 6.74:1 (AAA) | | Purple | #CC78BC | Special states, implementors | ✅ 4.51:1 (AA) | ✅ 3.65:1 (AA) | | Brown | #CA9161 | Neutral elements, secondary | ✅ 5.23:1 (AAA) | ✅ 4.23:1 (AAA) | |