Set accessible theme colours

Outcome

You will set a readable semantic palette for Light and Dark modes and verify that colour is never the only signal.

Before you start

Record the current values before making a change.

Open the Color Scheme

Go to Settings → Theme → Colors. The Color Scheme section edits Light and Dark values and provides translate controls to generate the opposite mode.

Start with Background and Foreground

Set Background and Foreground first. Foreground is the default text colour and should contrast clearly with Background in both modes.

Use the contrast indicators

Each relevant text pair displays a contrast result such as AAA and its measured ratio. Treat that indicator as a starting check, then test real font sizes, weights, and states.

Build related surface pairs

• Card with Card Foreground
• Popover with Popover Foreground
• Primary, Secondary, Accent, Muted, and Destructive colours with their foreground partners
• Border, Input, and Ring values for structure and focus

Translate with care

Invert to dark and Invert to light can provide a starting value. Review the generated colour; automatic inversion does not understand brand meaning or image context.

Check interactive states

Verify default, hover, focus, active, selected, disabled, error, and success states. Keyboard focus must remain visible against every surface.

Do not rely on colour alone

Pair colour with labels, icons, text, borders, or patterns. A red field still needs an error message; a selected tab still needs a structural state.

Save and verify

1. Choose Save Changes.
2. Check one public page and one post.
3. Test Light and Dark modes.
4. Test desktop and narrow widths.
5. Check text zoom, keyboard focus, and disabled controls.

Undo or recover

Use Reset for unsaved edits only after confirming the scope. For saved changes, restore the recorded semantic values and save again. Recheck both modes.

If contrast still fails

• Confirm the component uses the intended semantic pair.
• Check font size and weight, not only the colour ratio.
• Inspect translucent overlays and image backgrounds.
• Verify page or block Style overrides are not replacing the theme.

Publication gate: a reviewer must verify real content, focus, error states, both modes, desktop, and narrow output without relying on colour alone.