Accent colour
Appearance → Customize → Design → General → Colors → Accent color. Default
#4c9c66, a muted green.
Where it is used
The accent is the theme’s one loud colour. It appears on:
- The Primary header button
- The
Link color, accent fill on hoveroption in Content link style - Buttons and interactive accents through the theme’s own components
It is deliberately a short list. An accent used everywhere stops being an accent.
Accent and link colour are separate
Link color has its own picker, and also defaults to #4c9c66. They are
separate settings because they do different jobs: the accent is decoration, the
link colour is a functional signal to the reader.
Setting them to the same value — the default — makes the site read as one colour family. Setting them apart is a deliberate choice, usually a neutral accent with a strong link colour, or the reverse.
Picking one
Take it from your own material. If you have a logo, the accent is in it. If you photograph a lot, pull it from your most typical picture. A colour that already appears on the site looks chosen; a colour picked from a palette generator often does not.
Mid-dark works best. The accent has to hold white text on a button and read as a link colour on white. That means somewhere in the middle of the value range — a pale pastel fails the first, a near-black fails the second and just looks like text.
Check the contrast. Against white, an accent used for a link needs 4.5:1 for WCAG AA at body size. A button filled with the accent needs the same ratio between the fill and the label on it. Any online contrast checker will tell you in a second, and it is worth doing — the theme carries the accessibility-ready tag, and your own colour choices are the one part of that you own.
The default #4c9c66 sits at roughly 3.6:1 on white, which is why the theme also
gives every link style a non-colour cue: an
underline, or a change on hover. Colour is never the only signal.
The other colour pickers
In the same section, in order:
| Setting | Default | |
|---|---|---|
| Accent color | #4c9c66 |
|
| Base text color | #000000 |
Body copy |
| Heading color | empty | Empty follows the base text colour |
| Link color | #4c9c66 |
|
| Border color | #e0e0e0 |
Every hairline the theme draws |
| Selection text color | #000000 |
Text the visitor has selected |
| Selection background | #ffffdd |
And its highlight — also used by the marker link style |
| Background Color | white | Core’s own setting, folded into this section |