CSS accent-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

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.