What Is CSS accent-color? How to Change the Colors of Form Controls

TIPS

Checkboxes and radio buttons on a website may use the browser’s default highlight color instead of the color used in the rest of the design. The CSS accent-color property lets you specify an accent color for certain native controls while retaining their familiar appearance and interaction behavior. It does not, however, recolor every field or button in a form. Here is which controls it affects, how to use it in a realistic example, and what still needs to be checked for accessibility.

Which form controls does accent-color affect?

accent-color is a CSS property that specifies the accent color used by certain browser-rendered interface controls. CSS (Cascading Style Sheets) defines the visual appearance of web pages. An accent color is the highlight used by a control for information such as a selected state or progress. In browsers that support the property, it currently applies to these four kinds of elements:

<input type="checkbox">, for aspects of the checked state.
<input type="radio">, for aspects of the selected radio button.
<input type="range">, for parts of a slider.
<progress>, for parts of a progress indicator.

For example, you can assign purple #7C3AED as the accent-color. The initial value, auto, leaves the accent choice to the browser or operating system. This CSS property is inherited, so a parent can supply a common value to descendants, although the example below targets the relevant controls explicitly.

Setting accent-color does not automatically change the background of a text field, the text in its label, or an ordinary submit button. Those elements need separate properties such as background-color and color. Nor does accent-color provide complete control over the shape of a checkmark or a slider thumb.

Example: apply one purple accent to online course preferences

Imagine a settings section for an online course, with a captions checkbox, a choice of study frequency, a daily study-time slider, and a progress bar. Use the same accent to tie these related controls together. The large background is pale violet #F5F3FF, and the explanatory text is dark purplish gray #2D2145. Purple #7C3AED is the requested accent, while a muted purple-gray #6B5B85 identifies the boundary of the study-frequency group.

<section class="course-settings">
  <h3>Online course preferences</h3>
  <label class="choice">
    <input type="checkbox" name="captions" checked>
    Show captions
  </label>
  <fieldset>
    <legend>Study frequency</legend>
    <label class="choice">
      <input type="radio" name="pace" value="once" checked>
      Once a week
    </label>
    <label class="choice">
      <input type="radio" name="pace" value="twice">
      Twice a week
    </label>
  </fieldset>
  <label for="study-time">Daily study time (initially 30 minutes)</label>
  <input id="study-time" type="range"
         min="10" max="60" step="10" value="30">
  <label for="lesson-progress">Progress: 3 of 5 tasks complete</label>
  <progress id="lesson-progress" value="3" max="5">3/5</progress>
</section>

.course-settings {
  max-width: 36rem;
  padding: 24px;
  border-radius: 12px;
  background-color: ■#F5F3FF;
  color: ■#2D2145;
}
.course-settings .choice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.course-settings fieldset {
  margin: 16px 0;
  border: 2px solid ■#6B5B85;
  border-radius: 8px;
}
.course-settings :is(
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  progress
) {
  accent-color: ■#7C3AED;
}
.course-settings input[type="range"],
.course-settings progress {
  display: block;
  width: 100%;
  margin: 12px 0;
}
.course-settings :is(
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"]
):focus-visible {
  outline: 3px solid ■#4C1D95;
  outline-offset: 4px;
}

The checkbox uses the checked attribute to start in the selected state. Radio inputs with the same name form a group in which only one option can be selected. The slider begins at 30 minutes, while the progress indicator represents three of five tasks completed. This example demonstrates native controls and their appearance; it does not implement settings storage or update the written time as the slider moves.

A separate dark-purple #4C1D95 outline is assigned using :focus-visible, which can highlight the control receiving keyboard focus. This matters because accent-color does not automatically define the shape or color of all focus indicators.

Check the rendered states and their contrast

The specified dark text #2D2145 against the pale background #F5F3FF has a contrast ratio of approximately 13.53:1, exceeding the Web Content Accessibility Guidelines (WCAG) 2.2 minimum of 4.5:1 for normal-sized text. The chosen purple accent #7C3AED against that background measures about 5.20:1; the group border #6B5B85 reaches about 5.53:1; and the darker focus outline #4C1D95 measures about 9.99:1. These values are useful when evaluating the 3:1 non-text contrast requirement for visual information needed to recognize controls or their states.

They are calculations for the specified CSS colors, not measurements of every pixel in each rendered control. The browser draws checkmarks, radio indicators, slider thumbs, and progress bars. To preserve legibility, it may adjust the requested accent or choose different colors for details inside a control. Therefore, the listed ratios do not prove that every browser-rendered state meets the relevant requirement. Test unchecked, checked, selected, and focused states on the browsers and devices your site supports.

In a browser without suitable support, the native control may retain its default accent color. Avoid using appearance: none; solely to force the desired shade: removing the native appearance means taking responsibility for the checked indicator, visible states, and interaction details. Keeping familiar controls and using their checkmarks, radio dots, and explanatory labels helps communicate state without relying on color alone.

HueRoll can help explore potential colors and check a selected color’s contrast against white or black. It does not automatically compare arbitrary color pairs or inspect the actual appearance of browser-rendered form controls. After picking a candidate accent, review the finished form and its interaction states directly.