skills.rest
wahidyankf
wahidyankfCOMMUNITY
Explore all skills by this author →
𝕏@wahidyankfGitHub

docs-creating-accessible-diagrams

Create WCAG-compliant Mermaid diagrams with verified color-blind friendly palettes.

3|1|Updated Apr 18, 2026
Search Tags:#documentation#mermaid#wcag#color blindness#accessibility compliance#accessible diagrams#diagram accessibility
One-click install
npx skills add https://github.com/wahidyankf/ose-primer --skill docs-creating-accessible-diagrams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: docs-creating-accessible-diagrams
Source: https://github.com/wahidyankf/ose-primer/tree/main/.claude/skills/docs-creating-accessible-diagrams
Command: npx skills add https://github.com/wahidyankf/ose-primer --skill docs-creating-accessible-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about docs-creating-accessible-diagrams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make Mermaid diagrams accessible for color blind users?▼

To make Mermaid diagrams accessible for color blind users, apply a pre-vetted palette of 8 color-blind friendly hex codes meeting WCAG AA/AAA contrast standards for light and dark modes. This ensures distinguishable nodes for protanopia, deuteranopia, and tritanopia.

What are the WCAG contrast ratio requirements for accessible diagrams?▼

WCAG contrast ratio requirements for accessible diagrams mandate AA/AAA compliance for both light and dark modes. Using a pre-vetted color palette eliminates manual contrast testing and ensures color-conveyed information is readable for users with color vision deficiency.

Why does my Mermaid diagram fail to render correctly?▼

Your Mermaid diagram fails to render due to syntax errors like missing classDef templates, improper comment formatting, or unescaped special characters. Applying standardized Mermaid syntax rules prevents these common rendering errors and ensures consistent output.

Can I use this approach for both flowcharts and sequence diagrams?▼

Yes, this accessible diagram approach applies to all Mermaid diagram creation tasks including flowcharts, architecture diagrams, and sequence diagrams. It ensures color conveys critical information accessibly across all diagram types for cross-functional stakeholders.

Do I need to manually test colors for accessibility compliance?▼

No, you do not need to manually test colors for accessibility compliance. A pre-vetted set of 8 color-blind friendly hex codes automatically meets WCAG AA/AAA contrast standards for light and dark modes, eliminating manual contrast testing.

What is the best way to ensure documentation meets accessibility compliance?▼

The best way to ensure documentation meets accessibility compliance is using standardized Mermaid syntax and a verified color-blind friendly palette. This satisfies WCAG requirements for public-facing documentation and prevents rendering errors that exclude key audiences.

Related Skills

Explore More Content & Communication Skills→
wfukatsuwfukatsu
8

fix-mermaid

Rewrites invalid Mermaid syntax blocks in Markdown documents.

Community
Basic
russell-lubojackyrussell-lubojacky

pdf-analyzer

Extract PDF text and convert diagrams to Mermaid code.

Community
Basic
nanorepublicananorepublica
61

Global Commenting

Apply standardized file headers and module-level comments across codebases.

Community
Basic
calesthiocalesthio
46.2k

beautiful-mermaid

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library.

Community
Intermediate