Accessibility in Design

Diagrams communicate visually — but not all users experience visuals the same way. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Many more rely on screen readers, magnification, or high-contrast modes. Accessible design ensures your diagrams communicate effectively to the widest possible audience.

Sufficient contrast between text and background is fundamental. WCAG defines minimum contrast ratios for different text sizes:

/* WCAG AA — minimum contrast ratios */
Normal text (< 18pt):       4.5 : 1
Large text  (≥ 18pt bold):  3.0 : 1

/* WCAG AAA — enhanced contrast ratios */
Normal text:                7.0 : 1
Large text:                 4.5 : 1

Color should never be the only way to convey meaning. Users with color vision deficiencies may not distinguish between red and green, or blue and purple.

• Add labels — Put text labels on color-coded elements ("Error", "Success", "Warning")
• Use patterns — Combine color with stripes, dots, or hatching for fill differentiation
• Use shapes — Different shapes (circle, diamond, square) reinforce meaning beyond color
• Add icons — A checkmark or exclamation mark adds redundant meaning

Readable text is crucial in diagrams, where labels often appear small or inside shapes:

• Minimum font size — Aim for at least 14px equivalent in exported images. Smaller text is hard to read on screens.
• Line height — Use at least 1.5x line spacing for multi-line text in diagram boxes
• Font choice — Sans-serif fonts are generally more readable in diagrams. Excalimate's hand-drawn font is legible and approachable.
• Avoid all-caps — Sentence case is easier to read for most users, especially those with dyslexia

When you export your diagrams as images, always provide meaningful alt text that describes what the diagram communicates, not how it looks:

<!-- Bad: describes the visual, not the content -->
<img alt="Diagram with boxes and arrows" />

<!-- Good: describes what the diagram communicates -->
<img alt="Architecture diagram showing user
requests flowing from Client through API Gateway
to the Database, with caching at the gateway layer" />

For complex diagrams, consider providing a longer description in a figcaption or a linked text alternative that walks through the diagram step by step.

When embedding diagrams in web pages, use semantic HTML to provide context:

• Use <figure> and <figcaption> — Wrap diagrams in semantic containers
• Heading hierarchy — Give each diagram section a proper heading level
• ARIA labels — Use aria-label or aria-describedby for interactive diagrams

Diagrams should be easy to understand regardless of cognitive ability:

• Keep it simple — Avoid cramming too many elements into one diagram. Split complex systems into multiple views.
• Clear labels — Use plain language. Avoid jargon-only labels without explanation.
• Consistent patterns — Use the same shapes, colors, and layout conventions throughout your diagrams
• Visual hierarchy — Guide the eye with size, position, and weight. The most important elements should be the most prominent.
• Whitespace — Give elements room to breathe. Cramped diagrams are harder to parse.

Excalimate's hand-drawn aesthetic isn't just visual — it has accessibility benefits:

• Less intimidating — Hand-drawn diagrams feel approachable and informal, reducing anxiety for non-technical audiences
• Organic shapes — Slightly imperfect lines are easier to distinguish from each other than pixel-perfect geometry
• Reduced cognitive load — The sketch style signals "this is a draft" which reduces the pressure to understand everything at once