Like in other UI in Spark: Flare, typography works by the principle of accessibility before aesthetics. Therefore the text should be readable and help the user understand what’s essential by well-contrasted size and color hierarchy.
In addition to selecting an appropriate text style for your designs, always ensure your text meets the color contrast standards defined for its size. WCAG offers suggested ratios of the best contrast based on the size of the text.
Typography should support both readability and effective communication. For guidance on content, tone, and language, see the UX Writing and Content guidelines (opens in new tab).
Relevant WCAG Criteria
1.4.3 – Contrast (Minimum) (AA)
Text must have sufficient contrast against its background.
- Normal text: 4.5:1
- Large text (18pt or 14pt bold): 3:1
1.4.6 – Contrast (Enhanced) (AAA)
Enhanced contrast requirements for increased readability.
- Normal text: 7:1
- Large text (18pt or 14pt bold): 4.5:1
Accessibility Guidance
Prioritize readability
Typography should support content comprehension through:
- Clear hierarchy
- Appropriate sizing
- Sufficient contrast
Validate text contrast
Always ensure text meets the required contrast ratio for its size.
AA (Minimum)
- Text: 4.5:1
- Large text: 3:1
AAA (Enhanced)
- Text: 7:1
- Large text: 4.5:1
Use typography styles consistently
Use approved typography styles and hierarchy levels to help users understand content structure and importance.
Avoid relying on typography alone
Size, weight, or styling should not be the only way meaning is communicated.
Use additional cues when conveying:
- Status
- Errors
- Required actions
- Important information
Common Issues
- Insufficient text contrast
- Using text styles inconsistently
- Creating custom hierarchy patterns
- Relying only on size or weight to communicate importance
- Using decorative text styles that reduce readability
Quick Checklist
✅ Text meets minimum contrast requirements
✅ Typography hierarchy is clear and consistent
✅ Approved typography styles are used
✅ Content remains easy to read
✅ Meaning is not communicated through typography alone