Set your header color

Why the header color matters#

Your portal’s top bar is painted in a single accent color, and several surfaces — primary buttons, the customer’s message bubble, the notification badge, and buttons in outbound email — paint white text and icons directly on top of that color. Pick a color that’s too light, and that white text becomes unreadable.

Settings → Branding shows a live WCAG contrast readout as you pick a color, and Essential Support’s own server rejects any save that fails the accessibility minimum — so you can’t accidentally ship an unreadable header.

Set your header color#

1. Click the gear icon in the top bar to open Settings.
2. In the left-hand navigation, click Branding. It opens on its Branding sub-tab by default.
3. Scroll to Header color. Its helper text reads: “The color of the top bar. The brand text and icons switch to dark automatically if it’s too light.”
4. Click the color swatch to open your browser’s native color picker, or enter a hex value directly. The default, if you’ve never changed it, is #233f64 (dark navy).
5. As you pick, a live status line below the swatch reports the contrast of white text against your chosen color — see the readout examples below.
6. Click Save color.
7. On success, “Saved” appears, and the color applies immediately across the app — the header, primary buttons, and badges.

The live contrast readout#

• Passing (4.5:1 or higher): “White header text on this color: 6.3:1 contrast — meets the 4.5:1 minimum.”
• Failing (below 4.5:1): “White header text on this color: 2.1:1 contrast — below the 4.5:1 minimum, so the header will be hard to read. Choose a darker color.”

The contrast gate on save#

The live readout is a warning, but the save itself is a hard gate: if you click Save color on a color that fails the 4.5:1 minimum, the server rejects it outright and names the exact ratio it measured, for example: “That link color is too light: the app puts white text on it (buttons, badges, email buttons). Contrast is 3.2:1 — it needs at least 4.5:1. Pick a darker color.” Choose a darker shade and save again.

Notes and edge cases#

• The “brand text and icons switch to dark automatically” behavior mentioned in the helper text is a separate mechanism from the save-time contrast gate: certain elements independently pick black or white text for the best contrast against your color, in addition to the white-on-color surfaces that require your color itself to pass 4.5:1.
• Contrast can only be checked against a recognizable color value — if you paste something the picker can’t parse, saving fails with a message asking for a hex, rgb(), or hsl() value instead.

Related: Set your brand name and Upload your logo.