CSS light-level Media Feature

Definition and Usage

The light-level media feature was a proposed query for ambient light around the device: dim, normal, or washed.

The goal was to adapt contrast for dark rooms or bright sunlight. It was never implemented in browsers and was removed from Media Queries Level 5 as redundant with prefers-contrast and prefers-color-scheme. Study the syntax for history exams — do not ship it for production UI.

CSS Syntax

Historical form only. Parentheses were required, same as other media features.

Feature Values

How to Study light-level (Not Ship It)

Learn the old keywords, then map them to modern alternatives.

1. Recognize the three historical values: dim, normal, washed.
2. Remember: no browser matches these queries today.
3. For theme, use prefers-color-scheme.
4. For contrast needs, use prefers-contrast and strong default contrast.

Live Preview

matchMedia on this device. Expect no matches — that confirms the feature is unavailable.

CSS Examples

Historical study snippets. View Output shows the intended look; real queries do not apply in browsers. Use Try It Yourself to inspect the syntax.

p {
  background: #f1f5f9;
  color: #334155;
}

@media (light-level: dim) {
  p {
    background: #222;
    color: #ccc;
  }
}

p {
  background: #f1f5f9;
  color: #334155;
}

@media (light-level: washed) {
  p {
    background: #fff;
    color: #000;
    font-weight: 700;
  }
}

p {
  background: #f8fafc;
  color: #0f172a;
}

@media (prefers-color-scheme: dark) {
  p {
    background: #0f172a;
    color: #e2e8f0;
  }
}

@media (prefers-contrast: more) {
  p {
    color: #000;
    border: 2px solid currentColor;
  }
}

Key Takeaways