Colors
Color Accessibility
Contrast ratios and WCAG compliance guidelines
Production
All Ontopix color combinations are designed to meet WCAG 2.1 AA contrast requirements.
Contrast Requirements
| Element Type | Minimum Ratio | Example |
|---|---|---|
| Normal text (< 18pt) | 4.5:1 | Body text, labels |
| Large text (≥ 18pt or 14pt bold) | 3:1 | Headings, titles |
| Interactive elements | 3:1 | Buttons, links |
| Non-text elements | 3:1 | Icons, borders |
Recommended Combinations
Light Mode
| Background | Text | Ratio |
|---|---|---|
50-200 shades | 700-950 shades | ≥ 4.5:1 |
| White | 700+ shades | ≥ 4.5:1 |
Dark Mode
| Background | Text | Ratio |
|---|---|---|
800-950 shades | 50-300 shades | ≥ 4.5:1 |
| Black | 300- shades | ≥ 4.5:1 |
Best Practices
Do:
- Use shade 50-200 on dark backgrounds (800-950)
- Use shade 700-900 on light backgrounds (50-200)
- Test color combinations with accessibility tools
- Provide alternative indicators beyond color alone
Don't:
- Rely solely on color to convey information
- Use low-contrast combinations for important content
- Skip testing in both light and dark modes
Testing Tools
- WebAIM Contrast Checker
- Accessible Colors
- Browser DevTools accessibility audits