Prefers contrast

CSS course · Advanced · Lesson 35/52

Learn high contrast with @media (prefers-contrast).

prefers-contrast

Some users want higher contrast in their system; reading becomes easier for people with low vision or under bright sunlight. The @media (prefers-contrast: more) query catches this preference.

Inside this block you make text colors darker, backgrounds lighter and borders thicker. The goal is not to change the default theme but to raise contrast.

Four contrast values

prefers-contrast takes four values: no-preference, more, less and custom. more is the most common use; custom means the user has chosen their own custom color palette.

A custom palette usually means a high-contrast setup like yellow text on a black background. In that case it is good practice to fix border and text colors with concrete values.

Exercise Define colors for higher contrast

Write an @media (prefers-contrast: more) block. Inside it, define color: black and background: white on the body selector.

Show example solution

/* colors for higher contrast */
@media (prefers-contrast: more) {
  body {
    color: black;
    background: white;
  }
}

Test yourself

Which one catches the higher contrast preference?
- @media (contrast: high)
- @media (prefers-contrast: high)
- @media (high-contrast: true)
- @media (prefers-contrast: more)
Show answer

@media (prefers-contrast: more) — Correct. prefers-contrast: more fires on the higher contrast preference.

Write the contrast query

@media (____: more) {
  body { color: black; background: white; }
}

Show answer

@media (prefers-contrast: more) {
  body { color: black; background: white; }
}

Match the contrast values

more

Higher contrast
less

Lower contrast
custom

Custom palette
no-preference

No preference

All lessons in Advanced

Prefers contrast