Visual Design

Typography

Core text spacing

• Line height: Minimum 1.5× font size
• Paragraph spacing: Minimum 2× font size
• Letter spacing: Minimum 0.12× font size
• Word spacing: Minimum 0.16× font size

Font size & contrast rules

1. Minimum font size: 10pt
2. Regular text (under 18pt or 14pt bold)

• MUST have at least 4.5:1 contrast ratio with the background
• SHOULD have 7:1 contrast ratio with the background

1. Large text (18pt+ or 14pt+ bold)

• MUST have 3:1 contrast ratio with the background

Example

✓ 16pt text, black on white (21:1 ratio) 


✓ 24pt heading, dark gray on white (11:1 ratio) 


✗ 12pt text, light gray on white (2:1 ratio)

Source: WCAG2.1: Text spacing

---

Other elements

Core contrast rules:

1. Regular text: 4.5:1 minimum
2. Icons/graphics: 3:1 minimum
3. Large text: 3:1 minimum
4. Brand logos: No requirements

Example

✓ Black text on white (21:1)

✓ Dark blue icon on light gray (4:1) 


✗ Light gray text on white (2:1)

Source: WCAG 2.1: Contrast Minimum , WCAG 2.1: Non-text contrast
Tools: WebAIM: Colour Contrast Tool , Mac App: Contrast

Layout

1. Keep layouts linear and consistent
2. Write clearly without fancy language
3. Design for small screens first, then scale up (Responsive Design. Consider mobile when initially designing the layout and relevancy of content (mobile-first design).)

Source: WCAG Mobile accessibility mapping: Consistent layout, WCAG 2.1: Info and relationships, WCAG 2.1: Reflow

Media

1. Describe images meaningfully (unless decorative)
2. Let users control any moving content
3. Provide text alternatives for all audio/video

Source: WCAG 2.1: Non-text content, WCAG 2.1: Pause, stop, hide, WCAG 2.1: Time Adjustable,
WCAG 2.1: Audio only video only — Prerecorded , WCAG 2.1: Captions prerecorded , WCAG 2.1: Audio description — Prerecorded