aniqa.dev
← Archive12 / 16

ExperimentNo. 12Updated

Accent Color

Compare native checkboxes, radios, sliders and progress bars with and without accent-color. Change the hue and compare it across light and dark surfaces.

Made
Nov 2023
Type
CSS study
Stack
HTML / CSS
Links
Code ↗v1 ↗
Browser defaultno accent-color
Customaccent-color: #1f9fb0
light
dark

Look at the check mark in the selected boxes. Browsers choose a light or dark mark to keep it readable against the accent. Try the pale yellow, then the deep blue.

Pick a hue · compare the controls

Idea

I wanted to see how far accent-color could take native form controls, and how the same color looked across light and dark surfaces.

Notes

  1. accent-color recolors checkboxes, radios, range inputs and progress bars without replacing their native behavior.
  2. Browsers adjust the check mark to keep it visible against a light accent. Try the pale yellow preset to see it switch to a darker mark.

Revisited

  1. Nov 2023: first made on CodePen (v1).
  2. Nov 2026: rebuilt for the lab with a color picker.