---
title: "Picking an accent color that survives both themes | Studio Drewskii"
canonical: https://studiodrewskii.com/notes/picking-an-accent-color-that-survives-both-themes
last_updated: 2026-06-10
---

# Picking an accent color that survives both themes

How to choose an accent color and its text/ring/hover variants so the same brand works on white and on near-black.

Published: 2026-06-10
Tags: Color, Design Tokens, Accessibility

## One hue, two jobs

An accent color does two jobs: it fills buttons and it colors links and highlights. On light backgrounds the filled version needs a dark text on top; on dark backgrounds the same fill needs light text. Choose the hue so both readings work, then set per-theme text colors instead of fighting the hue.
The per-theme pattern: accent stays identical, accent-text (the readable variant for links) shifts darker in light mode and lighter in dark mode. One hue, two derived colors.

## The contrast floor

Run the math before you fall in love. Text on the accent fill needs 4.5:1 for normal size, and accent-text on the page background needs 4.5:1 too. Orange like #E87040 clears both with a near-black fill text and a darkened link variant.
Do not eyeball it. A two-line contrast function in a console beats a week of squinting.

## Ring and glow variants

Accent needs a ring (border/focus, 0.3–0.4 alpha) and a glow (text-shadow on highlights, 0.25 light / 0.5 dark). Those alphas live in the theme, not the component.
The test: focus state, hover state, and selected state must all stay distinguishable in both themes without the hue changing.

## Have a live URL?

Run the free audit, then email the score and the URL.

If the brand and the page both need work, the Brand + Homepage Sprint is $8,500 / 14 days.

[Free audit](https://ratemybrand.pro)