Spark Design System
Accessibility
Text contrast
Ensure a contrast ratio of at least 4.5:1 between text (and images of text) and the background behind the text, and at least 3:1 for large text (18 point or 14 point bold)
No minimum contrast requirement for
- Text that is part of a logo
- Text that is part of an inactive user interface component
- Text that is pure decoration
- Text that is not visible to anyone
Why it matters
People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.
Screen shot of WebAIM contrast checker tool
WCAG 2.0 reference: 1.4.3. Contrast (Minimum)
How to check for this
Use a tool like Contrast checker to check color contrast ratios against WCAG AA requirements. Manual Automated
Collaborators
- Designers
- Spark color contrast guidelines