Colors
Color Accessibility
Contrast ratios and WCAG compliance for the Ontopix color system.
Production
All Ontopix products and content must meet WCAG 2.1 Level AA. Some areas may target AAA where practical.
Contrast Requirements
| Element type | Ratio | Level | Applies to |
|---|---|---|---|
| Normal text | 4.5:1 | AA | Text smaller than 18pt or 14pt bold |
| Large text | 3.0:1 | AA | 18pt or 14pt bold and larger |
| Ui components | 3.0:1 | AA | Borders, icons, focus indicators |
| Enhanced | 7.0:1 | AAA | Target for critical content |
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 |
Semantic Token Rule
Semantic tokens (defined in semantic.yaml) must be chosen so that the default foreground/background pairing meets at least AA contrast for the intended text size. Dark-mode mappings must independently satisfy the same ratios.
Non-Color Indicators
Color must never be the only signifier of meaning. Pair color with iconography, text labels, or weight changes so information is conveyed to users with color vision deficiencies.
Testing
- Use automated checkers (axe, Lighthouse) during development
- Verify final colors with a contrast calculator against real content
- Test in both light and dark modes
Tools
- WebAIM Contrast Checker
- Accessible Colors
- Browser DevTools accessibility audits
Related
- Semantic Tokens — Tokens whose pairings are validated against these ratios
- Usage Guide — When and how to use each token
- Guide → Accessibility — Cross-reference for typography and motion accessibility rules