Typography

Accessibility and Contrast

---

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.

 

Color contrast guidelines for AA (minimum)

• Text and images should have a ratio of 4.5:1
• Large text (18-point or 14-point bold) needs a ratio of 3:1

 

Color contrast guidelines for AAA (enhanced)

• Text and images should have a ratio of 7:1
• Large text (18-point or 14-point bold) needs a ratio of 4.5:1