The light-level CSS media feature can be used to test the ambient light level.


The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.
The device is used in a environment with a light level in the ideal range for the screen, and which does not necessitate any particular adjustment.
The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.


This code will likely not work on any devices (device compatibility is low).

@media (light-level: normal) {
  p {
    background: url("texture.jpg");
    color: #333;

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

@media (light-level: washed) {
  p {
    background: white;
    color: black;
    font-size: 2em;


Specification Status Comment
Media Queries Level 5
The definition of 'light-level' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
light-level media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No


No support  
No support