Colors
The WHA brand palette, how each color is used and which pairings meet contrast requirements.
The palette is defined once in theme.json (the WordPress source of truth) and mirrored in tailwind.config.js, so the same colors reach editors (as named swatches in the color picker) and developers (as utility classes). Reach for the named token — primary, secondary and so on — never a raw hex value, so a future palette change stays in the one place it's defined.
Palette
| Token | Name | Hex | Used for | |
|---|---|---|---|---|
primary | Pink | #e21d5e | Primary actions, links and the main brand presence | |
secondary | Plum | #942e5a | Supporting headings, secondary accents and hover states | |
tertiary | Blue | #daf0f4 | Soft section backgrounds and tints | |
accent | Yellow | #DCD22C | Highlights and small attention-getting details | |
dark | Dark | #282f3e | Body text and dark backgrounds | |
light | White | #ffffff | Page backgrounds and text on dark fills |
Accessible pairings
WCAG AA needs a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (roughly 18px bold or 24px regular and up); AAA is 7:1. These are the tested combinations:
| Sample | Text | Background | Ratio | Rating |
|---|---|---|---|---|
| Aa | White | dark | 13.4:1 | AAA |
| Aa | dark | White | 13.4:1 | AAA |
| Aa | dark | tertiary | 11.3:1 | AAA |
| Aa | dark | accent | 8.5:1 | AAA |
| Aa | White | secondary | 7.5:1 | AAA |
| Aa | White | primary | 4.6:1 | AA |
| Aa | primary | White | 4.6:1 | AA |
Watch out for
primaryontertiaryis only 3.9:1. It fails AA for normal text and passes for large text only. Don't useprimaryfor body copy on the blue tint; usedarkinstead.accentneeds a dark background. On white ortertiaryit has very low contrast. Pairaccentwithdarkonly, and never use it for text on a light background.- Don't rely on color alone to convey meaning; pair it with text or an icon. See Accessibility.
In code
The tokens map to Tailwind utility classes — text-primary, bg-tertiary, border-secondary — and to the matching theme.json color slugs in the editor. Add an opacity suffix where you need it, e.g. text-dark/80 for 80% body text.