BaselineLab
0Support

CSS accent-color playground

Explore accent-color with a color picker to customize native checkbox, radio, range, and progress controls without JavaScript.

Read the guide

Ask AI

CSS accent-color playground

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
HTML
<form class="accent-color-demo">
  <label>
    <input type="checkbox" checked />
    Checkbox
  </label>

  <label>
    <input type="radio" name="accent-demo" checked />
    Radio
  </label>

  <label>
    Range
    <input type="range" value="64" />
  </label>

  <label>
    Progress
    <progress max="100" value="64">64%</progress>
  </label>
</form>
Tailwind CSS
Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.
<form class="grid gap-3 max-inline-[24rem] accent-[#38d5b2]">
  <label class="flex items-center gap-2">
    <input type="checkbox" checked />
    Checkbox
  </label>

  <label class="flex items-center gap-2">
    <input type="radio" name="accent-demo" checked />
    Radio
  </label>

  <label class="flex items-center gap-2">
    Range
    <input class="inline-full" type="range" value="64" />
  </label>

  <label class="flex items-center gap-2">
    Progress
    <progress class="inline-full" max="100" value="64">
      64%
    </progress>
  </label>
</form>
CSS
.accent-color-demo {
  display: grid;
  gap: 0.75rem;
  max-inline-size: 24rem;
  accent-color: #38d5b2;
}

.accent-color-demo label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.accent-color-demo :where(input[type="range"], progress) {
  inline-size: 100%;
}

Educational guide to accent-color

Color native controls without rebuilding them

accent-color proposes an accent for native controls. The browser keeps their shape, interaction, and states; you choose the color and check the result.

Back to playground

Mental model

An inherited accent, not a complete paint job for the control.

It accepts auto or a color. auto leaves the choice to the browser: it does not promise a particular shade or always reproduce the system accent. The property inherits, so you can set it on a container; a declaration applied directly to an input takes priority over the inherited value.

It affects the parts that the browser draws with an accent. It does not define the shape, size, every background, or the focus indicator. Keep native appearance: removing it with appearance: none may remove the part you expected to tint.

Controls and states

Try checkbox, radio, range, and progress with one declaration.

These are the four controls currently documented. Toggle checkboxes, change plans with arrow keys, and adjust the slider. Not every state uses the accent: unchecked or disabled controls may keep browser colors. progress shows a fixed 60% here; moving the range does not update it.

A shared accent and an exception with auto

Preferences and plan
Checkboxes, radios, range, and progress keep their native behavior. The last checkbox restores the automatic accent; marks, position, and labels also distinguish states.
A shared accent and an exception with auto
<div class="accent-guide-controls">
  <fieldset>
    <legend>Preferences and plan</legend>
    <label><input type="checkbox" checked /> Checked checkbox</label>
    <label><input type="checkbox" /> Unchecked checkbox</label>
    <label><input type="checkbox" checked disabled /> Disabled checkbox</label>
    <label><input type="radio" name="accent-guide-plan" value="monthly" checked /> Monthly plan</label>
    <label><input type="radio" name="accent-guide-plan" value="yearly" /> Yearly plan</label>
  </fieldset>
  <label>
    Volume
    <input type="range" min="0" max="100" value="60" />
  </label>
  <label>
    Download progress — 60%
    <progress max="100" value="60">60%</progress>
  </label>
  <label class="automatic">
    <input type="checkbox" checked /> Automatic browser accent
  </label>
</div>
.accent-guide-controls {
  accent-color: #7c3aed;
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
  font-size: 1rem;

  fieldset {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-block-size: 2.75rem;
  }

  :is(input, progress) {
    accent-color: inherit;
  }

  :is(input[type="range"], progress) {
    inline-size: 100%;
    min-inline-size: 0;
  }

  input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .automatic {
    accent-color: auto;
  }
}

accent-color: inherit on controls makes inheritance explicit even if a general rule assigns them an accent. The radio group name is exclusive to this example. A checkbox’s indeterminate state is set with JavaScript; accent-color only contributes to its presentation.

Themes and contrast

The same control needs checking against its actual backgrounds.

color-scheme tells the browser which schemes an area supports and affects native appearance; it does not automatically change all author colors. This comparison forces light and dark on two groups, uses Canvas/CanvasText for their surfaces, and chooses an accent for each. On a page supporting both schemes, color-scheme: light dark follows the user’s preference.

Native comparison in light and dark

Light scheme
Dark scheme
Both groups keep their local schemes when you change the website theme. Checked and disabled checkboxes let you compare states; the browser decides which parts receive the accent.
Native comparison in light and dark
<div class="accent-guide-themes">
  <fieldset class="light">
    <legend>Light scheme</legend>
    <label><input type="checkbox" checked /> Receive notifications</label>
    <label><input type="checkbox" disabled checked /> Disabled checkbox</label>
  </fieldset>
  <fieldset class="dark">
    <legend>Dark scheme</legend>
    <label><input type="checkbox" checked /> Receive notifications</label>
    <label><input type="checkbox" disabled checked /> Disabled checkbox</label>
  </fieldset>
</div>
.accent-guide-themes {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
  font-size: 1rem;

  fieldset {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-block-size: 2.75rem;
  }

  :is(input, progress) {
    accent-color: inherit;
  }

  :is(input[type="range"], progress) {
    inline-size: 100%;
    min-inline-size: 0;
  }

  input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  fieldset {
    background: Canvas;
    color: CanvasText;

    legend {
      background: Canvas;
    }
  }

  .light {
    color-scheme: light;
    accent-color: #6d28d9;
  }

  .dark {
    color-scheme: dark;
    accent-color: #c4b5fd;
  }
}

The browser may adjust the accent or checkmark color to preserve legibility, but this does not guarantee accessible contrast. Check marks, boundaries, backgrounds, and focus in relevant states and target browsers. In forced colors, allow the user’s palette to take effect; do not impose forced-color-adjust: none to preserve branding.

Common pitfalls

Check the element, state, and background before adding CSS.

The select or text field does not change

Expected result
Customize every field with the same accent.
Cause
accent-color is not a general tinting API for select, buttons, text fields, or meter.
Solution
Choose the tool for the need: control CSS, customizable select for presentation, or field-sizing for size. Keep labels, keyboard behavior, and focus.

The disabled checkbox does not keep the exact color

Expected result
Use the same shade across every state and platform.
Cause
Native appearance decides when to use the accent and may adjust its colors.
Solution
Allow native differences and check checked, unchecked, disabled, hover, and focus states. Redesigning the entire control goes beyond accent-color.

The brand color is visible, but the control is hard to read

Expected result
Distinguish the state and locate focus clearly.
Cause
An accent close to its background or an insufficient browser adjustment can hide details. Syntax support does not prove contrast.
Solution
Check the composed result in both themes, keep visible focus, and test forced colors. Change the accent if needed; do not communicate state through color alone.

Support and compatibility

The declaration and the visual result need separate checks.

Check Baseline status and browser details. BCD records a contrast limitation in Chrome for Android and Safari before 26.2. Do not extrapolate this preview’s result to other platforms or every state.

Without support, the declaration is ignored and the native control remains. That is the fallback in these examples: they do not replace controls or simulate an accent. CSS.supports only confirms syntax acceptance, not the tinting of each part or its legibility.

Native select guide: options, data, and keyboardCustomizable select guide: appearance and pickerfield-sizing guide: size based on content