v137 · css

System accent color for accent-color property.

This feature empowers web developers to enhance the visual appeal of their websites by leveraging the operating system's accent color for form elements. By utilizing the "accent-color" CSS property, developers can ensure that form elements such as checkboxes, radio buttons, and progress bars automatically adopt the accent color defined by the user's operatin

concepts

  1. System Accent

    accent-color now respects the OS-level system accent color via AccentColor. Form controls follow the user's chosen theme without per-OS detection.

  2. Themed UI

    Derive an entire site theme — buttons, badges, focus rings, links — from AccentColor + AccentColorText. Live WCAG contrast read-out included.

  3. Contrast audit

  4. Form Accent Showcase

    All native form controls — checkbox, radio, range, progress, select — rendered in three accent modes: system-accent-color, a custom hex color, and browser default. Switch modes live and see the CSS accent-color value generated for each control.

    Cycle through real OS accent colours (Win11, macOS, Gboard, custom) and the audit scores every text-on-accent and accent-on-bg pair for WCAG AA. Surfaces the failure modes that ship the moment you opt into AccentColor.

why it shipped

When form elements such as checkboxes, radio buttons, and progress bars automatically adopt the accent color defined by the user's operating system, it creates a unified visual experience. This means that the colors used in the web application will match the user's chosen system theme, making the interface feel more familiar and intuitive.

references