Colour Contrast in Dark Mode

# Colour Contrast in Dark Mode

Dark mode requires different contrast considerations than light mode.

## The Challenge

WCAG contrast ratios assume light backgrounds. Dark mode flips this:

- Text becomes light
- Backgrounds become dark
- Colors behave differently

## Recommended Ratios

- **Text**: 4.5:1 minimum
- **Large text**: 3:1 minimum
- **UI components**: 3:1 minimum

## Testing Tools

```css
/* Use CSS custom properties */
:root[data-theme="dark"] {
--text: #f4f4f5;
--bg: #09090b;
--accent: #dc2626;
}
```

Use tools like:

- Contrast Checker
- Stark (Figma plugin)
- Accessible Colors

## Best Practices

1. Test both themes
2. Avoid pure white/black
3. Reduce saturation in dark mode
4. Use system preferences

## Conclusion

Dark mode contrast requires careful testing. Don't just invert colors!