prefers-contrast

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since May 2022.

Theprefers-contrastCSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.

Syntax

no-preference: Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the Boolean context.
more: Indicates that user has notified the system that they prefer an interface that has a higher level of contrast.
less: Indicates that user has notified the system that they prefer an interface that has a lower level of contrast.
custom: Indicates that user has notified the system for using a specific set of colors, and the contrast implied by these colors matches neithermore norless. This value will match the color palette specified by users offorced-colors: active.

User preferences

Various operating systems do support such preferences and user agents are likely to rely on the settings provided by the operating system.

Examples

This example includes a box with a dashedoutline set on it by default. When theprefers-contrast: more media query matches, the applied outline is given a higher contrastsolid style instead.

HTML

html

<div>low contrast box</div>

CSS

css

.contrast {  margin: 5px;  width: 100px;  height: 100px;  outline: 2px dashed black;}@media (prefers-contrast: more) {  .contrast {    outline: 2px solid black;  }}