Ambient light sensor | Frontend Practical Guide

Overview

The AmbientLightSensor API returns the current light level in lux of the ambient light level around the device. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`AmbientLightSensor` Experimental	67	79			67
`AmbientLightSensor` Experimental The AmbientLightSensor() constructor creates a new AmbientLightSensor object, which returns the current light level or illuminance of the ambient light around the hosting device.	67	79			67
`illuminance` Experimental The illuminance read-only property of the AmbientLightSensor interface returns the current light level in lux of the ambient light level around the hosting device.	67	79			67
`permission_ambient-light-sensor` Experimental `ambient-light-sensor` permission	62	79			62
Other
`html.elements.iframe.allow.ambient-light-sensor` Experimental	66	79			66
`http.headers.Permissions-Policy.ambient-light-sensor` Experimental The HTTP Permissions-Policy header ambient-light-sensor directive controls whether the current document is allowed to gather information about the amount of light in the environment around the device through the AmbientLightSensor interface.	66	79			66

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const sensor = new AmbientLightSensor();
sensor.addEventListener('reading', () => {
  console.log('Illuminance:', sensor.illuminance, 'lux');
});
sensor.start();

Use cases

Use Ambient light sensor
Use Ambient light sensor when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Ambient light sensor to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test Ambient light sensor in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.

Overview

Browser support

Syntax

Use cases

Use Ambient light sensor

Handle edge cases

Cautions

Accessibility

Related links