# Contrast Rules

Use these rules before approving a design system or page implementation.

## Minimums

- Normal body text should meet at least 4.5:1 contrast.
- Large headings and large CTA text should meet at least 3:1, but prefer stronger contrast for premium/client work.
- Icons, borders, inputs, and focus states should be visible at least 3:1 against their immediate background.
- Disabled states may be softer, but still need to be understandable.

## Practical Pairing Rules

- Dark navy, black, and saturated blue backgrounds need white or very light text.
- Blue buttons usually need white text, not another blue.
- Lime, yellow, or very light cyan buttons usually need dark navy or black text.
- Pale sections should use dark text; headings may use a deep brand blue if contrast is strong.
- Gradients need contrast checked against the darkest and lightest visible area under the text.
- Image backgrounds need an overlay strong enough that text remains readable in busy areas.
- Do not depend only on color to communicate active, selected, disabled, error, or success states.

## Failure Patterns To Fix

- Blue text on blue button.
- Black headings on dark blue backgrounds.
- White text over bright images without overlay.
- Oversized headings that are technically readable but visually overwhelming.
- Transparent headers over hero media without enough background support.
- Link colors that look like default browser blue instead of brand styling.

## Fix Priority

1. Change text color if the background is correct for the section.
2. Change background if the text color is a brand requirement.
3. Add overlay or surface layer if the section uses image/video.
4. Reduce type size or weight if heavy black text dominates the section.
