CSS accent-color Property

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

accent-color

CSS PropertyThis property is supported by all modern browsers.

Updated 3rd January 2026

Description

The accent-color property allows developers to control the visual accent color used by certain form controls and UI elements that are rendered by the browser’s native styling. Instead of fully rebuilding form elements with complex CSS or JavaScript, accent-color provides a simple and consistent way to customize their appearance while preserving accessibility, usability, and platform-native behavior.

This property primarily affects interactive elements such as checkboxes, radio buttons, range sliders, and progress indicators. When applied, it changes the highlight or “accent” portion of these controls - for example, the checkmark inside a checkbox, the filled portion of a progress bar, or the active thumb of a range slider.

One of the key advantages of accent-color is that it respects the browser’s built-in design system. Rather than overriding every visual detail, it blends seamlessly with the user’s operating system, theme, and accessibility preferences. This ensures that form controls still look familiar to users while matching the color identity of your website or application.

The property can be applied globally (such as on the :root or body element) or scoped to specific form controls. This makes it easy to create consistent theming across an entire interface or highlight individual UI sections with distinct accent colors. Because the styling is handled natively by the browser, performance remains high and compatibility with assistive technologies is maintained.

Another important benefit of accent-color is its responsiveness to user preferences such as high-contrast modes or forced color schemes. Browsers may adapt or override the chosen color when necessary to maintain readability and accessibility, ensuring a better experience for all users.

Definition

Initial value: auto
Applies to: all elements
Inherited: yes
Computed value: the keyword auto or a computed color
Animatable: by computed value type
JavaScript syntax: object.style.accentColor

Interactive Demo

accent-color: green;

accent-color: #E31CCF;

accent-color: rgb(23, 88, 103);

accent-color: hsl(237, 63%, 50%);

Accent Color Demo

Syntax

accent-color: auto | <color> | initial | inherit

Values

autoRepresents a UA-chosen color, which should match the accent color of the platform, if any.
<color>Specifies the color to be used as the accent color.

Example

HTML

<div class="demo">

    <h2>accent-color examples</h2>



    <div class="row">

        <label class="control accent-blue">

            <input type="checkbox" checked>

            <span>Blue checkbox</span>

        </label>



        <label class="control accent-green">

            <input type="radio" name="group1" checked>

            <span>Green radio</span>

        </label>



        <label class="control accent-red">

            <input type="range" min="0" max="100" value="40">

            <span>Red range</span>

        </label>

    </div>



    <div class="row">

        <label class="control accent-blue">

            <input type="checkbox">

            <span>Unchecked</span>

        </label>



        <label class="control accent-green">

            <input type="radio" name="group1">

            <span>Other radio</span>

        </label>



        <label class="control accent-red">

            <progress value="60" max="100"></progress>

            <span>Progress</span>

        </label>

    </div>

</div>

CSS

:root {
    --gap: 1rem;
    --pad: 1rem;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: #f8fafc;
    color: #0f172a;
    padding: 2rem;
}

.demo {
    background: #ffffff;
    border-radius: 10px;
    padding: var(--pad);
    box-shadow: 0 6px 18px rgba(2,6,23,0.06);
    max-width: 760px;
}

h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.row {
    display: flex;
    gap: var(--gap);
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.control {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

input[type="range"] {
    width: 160px;
}

progress {
    width: 160px;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    -webkit-appearance: none;
}

/* Different accent colors applied to the nearest form controls */
.accent-blue {
    accent-color: #0ea5e9; /* sky-500 */
}

.accent-green {
    accent-color: #10b981; /* emerald-500 */
}

.accent-red {
    accent-color: #ef4444; /* red-500 */
}

Result

Open in editor

Browser Support

The following information will show you the current browser support for the CSS accent-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.