Palette

Usage

Open Appearance → Customize → Styles → Palette to set your brand colors. Each color becomes a choice across the site: block color pickers, buttons, header and footer backgrounds, and text colors all use this palette.

Start with Primary, Secondary, and Accent for your main brand colors. Then adjust Text and Muted so body text and captions are easy to read on Canvas and your page background.

Contrast warnings

As you pick colors, Palette checks the pairs your site shows and flags any that are hard to read: body and muted text on the page background, headings, links, button text, light text on Black and Primary sections, text on cards and Gray sections, and form labels and borders. A summary at the top of Palette lists them, and each color involved gets a note with the contrast it has, what it needs (4.5:1 for text, 3:1 for large headings and form field borders, the WCAG AA minimum) and a darker or lighter color that would read.

The notes are only advice. Nothing changes by itself, and you can still publish.

• "Nothing to fix" notes: Secondary buttons, buttons on a section in your button color, and tags switch to black or white text on their own where their text wouldn't read. Form error messages show a darker (or, on dark sections, lighter) Failure where yours wouldn't read; in Reverse Print they stay white where white reads. The note tells you what visitors will see.
• Section tips: where white text doesn't read on Secondary, Accent or Variant, set Text Color to Dark on Background blocks in that color.
• Links with no underline: if your inline links have no underline and aren't bold, their color needs to stand out from the text around them (3:1). Set an Underline Size under Styles → Inline Links, or pick a link color further from Text.

When to use it

• Launching a new site, or updating brand colors after Theme Setup.
• Fixing contrast. Follow the contrast notes, or if links or buttons look faint, check Primary against Text and Canvas.
• Before adjusting Styles → Buttons, Links, or the Header & Menus colors, which all pick from the palette.

Tips

• Canvas is for cards and panels. The color behind whole pages is Body Background under Settings → General.
• Success and Failure color form messages. Keep them distinct from your brand colors so errors and confirmations stand out.
• Palette changes update many blocks at once. Publish at a quiet moment.