Multipurpose theme documentation
Multipurpose Fashion Theme
Color Contrast
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Accessibility > Color Contrast
Overview
Good color contrast makes text readable for more users, including those with low vision. Aim for sufficient contrast between text and background.
Ensuring readable colors
- Body text: Minimum 4.5:1 contrast ratio (normal text) or 3:1 (large text, 18px+ or 14px bold).
- Headings: Same as body or higher.
- Buttons: Ensure button text contrasts with button background.
- Links: Ensure links are distinguishable from body text.
Where to adjust
- Theme settings > Colors.
- Set Text color and Background color for sufficient contrast.
- For schemes, ensure each scheme’s text and background meet contrast requirements.
- Design > Button appearance: Set Text color and Background for buttons.
Testing contrast
- Use browser DevTools or tools like WebAIM Contrast Checker.
- Test all color schemes (light/dark, sale badges, etc.).
- Don’t rely on color alone for information (e.g. use icons or labels with color).
Common mistakes
| Mistake | Fix |
|---|---|
| Light gray on white | Increase contrast (darker text or different background). |
| Sale badge illegible | Check Sale tags and Save price schemes for contrast. |
| Buttons hard to read | Adjust button background and text color in Design. |
| Ignoring dark schemes | Test both light and dark color schemes. |