# Color in Use

> What each color means on renovare.org, the accent rotation, and approved text-on-background pairs with WCAG contrast ratios.

*Only green means something.*

## Meaning

| Color | Means | Use for |
|---|---|---|
| Primary green (400–700) | Renovaré, and “you can act here” | Buttons, links, eyebrows, the brand's dark bands |
| Brick #A43939 | Something went wrong | Form errors and error messages only — never decoration |
| Other accents | Nothing | Variety: panels, icon tiles, Navy and Plum bands |
| Neutrals | Nothing | Pages, borders, text |

Because accents carry no meaning, never use one to signal a program, a status, or a type of content. If something needs a label, use a [badge](https://styleguide.renovare.org/badges/).

## Accent rotation

When a layout needs several accent colors (feature grid boxes, icon tiles, a run of bands), use them in this order and start again at the top. Ochre, Rust, Brick and Periwinkle stay out of the rotation.

1. Navy `#334657`
2. Plum `#592E46`
3. Teal `#558E99`
4. Amber `#CC7829`

## Text and background pairs

Body text needs **AA** (4.5:1). “Large text only” pairs (3:1) are fine for text 24px and up, bold text 18.66px and up, icons and borders.

| Text | Background | Use | Ratio | WCAG |
|---|---|---|---|---|
| Neutral 800 `#2B2722` | Neutral 200 `#F2F0ED` | Body text on the page | 13:1 | AA |
| Neutral 900 `#080605` | Neutral 200 `#F2F0ED` | Headings on the page | 17.8:1 | AA |
| Neutral 700 `#4D4741` | Neutral 200 `#F2F0ED` | Secondary text on the page | 8.1:1 | AA |
| Neutral 600 `#7D7771` | Neutral 200 `#F2F0ED` | Muted text: 24px+ only | 3.9:1 | Large text only |
| Primary 500 `#106E46` | Neutral 200 `#F2F0ED` | Links and eyebrows on the page | 5.5:1 | AA |
| Primary 500 `#106E46` | White `#FFFFFF` | Links on white | 6.3:1 | AA |
| Brick `#A43939` | White `#FFFFFF` | Error messages | 6.5:1 | AA |
| White `#FFFFFF` | Primary 500 `#106E46` | Primary button | 6.3:1 | AA |
| White `#FFFFFF` | Primary 600 `#0D5738` | Primary button, hover | 8.6:1 | AA |
| White `#FFFFFF` | Primary 700 `#18412F` | Text on Green bands | 11.4:1 | AA |
| Primary 300 `#8FCFB4` | Primary 700 `#18412F` | Eyebrows on Green bands | 6.4:1 | AA |
| Primary 400 `#19AD6E` | Primary 700 `#18412F` | Accents on Green bands: large text and icons only | 3.9:1 | Large text only |
| White `#FFFFFF` | Navy `#334657` | Text on Navy bands | 9.7:1 | AA |
| Primary 300 `#8FCFB4` | Navy `#334657` | Eyebrows on Navy bands | 5.5:1 | AA |
| White `#FFFFFF` | Plum `#592E46` | Text on Plum bands | 11:1 | AA |
| Primary 300 `#8FCFB4` | Plum `#592E46` | Eyebrows on Plum bands | 6.2:1 | AA |
| White `#FFFFFF` | Teal `#558E99` | Icon tiles on Teal | 3.7:1 | Large text only |
| White `#FFFFFF` | Amber `#CC7829` | Icon tiles on Amber | 3.3:1 | Large text only |
| Neutral 900 `#080605` | Ochre `#D1A84C` | Text on Ochre | 9.1:1 | AA |
| Primary 400 `#19AD6E` | Neutral 200 `#F2F0ED` | Bright green as text on the page | 2.5:1 | Fails |

## Rules

- Primary 400 (bright green) is for dark backgrounds, icons and underlines — never for text on light backgrounds.
- Neutral 600 is for large or decorative text only; use Neutral 700 for small secondary text.
- On Green, Navy and Plum bands, eyebrows use Primary 300.
- Never put white text on Ochre, Amber, Teal or Periwinkle at body size.