CSS Function

prefers-contrast

The prefers-contrast media feature detects the user's preference for increased or decreased contrast in the UI.

Syntax

@media (prefers-contrast: no-preference | more | less | custom)

Parameters

Name	Type	Required	Description
no-preference	keyword	No	No contrast preference indicated
more	keyword	No	User prefers higher contrast (e.g., increased text/background difference)
less	keyword	No	User prefers lower contrast
custom	keyword	No	User has a custom contrast configuration (e.g., forced colors)

Examples

Increase border visibility

Add stronger borders and underlines for high-contrast users.

css

@media (prefers-contrast: more) {
  .card {
    border: 2px solid #000;
  }
  a {
    text-decoration: underline;
  }
}

Tailwind contrast variant

Tailwind v3.4+ supports contrast-more: and contrast-less: variants.

html

<div class="border-gray-200 contrast-more:border-gray-900">Card</div>

Browser Support

✓

Chrome

v96++

✓

Firefox

v101++

✓

Safari

v14.1++

✓

Edge

v96++

✓

Opera

v82++

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

contrast-more: and contrast-less: variants (Tailwind v3.4+)

Frequently Asked Questions

How do users trigger prefers-contrast: more?▼

On macOS: System Settings > Accessibility > Display > Increase contrast. On Windows: Settings > Ease of Access > High Contrast. On iOS: Settings > Accessibility > Increase Contrast.

What is the difference between prefers-contrast and forced-colors?▼

prefers-contrast is a preference hint that does not override your styles. forced-colors actively replaces your color palette with system colors.

Explore CSS Color Tools

Try our free tools to work with prefers-contrast and other CSS color functions.

Open Tools