Limited support Use with care and provide a fallback when broad support matters.

Ambient light sensor

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The AmbientLightSensor interface of the Sensor APIs returns the current light level or illuminance of the ambient light around the hosting device.

To use this sensor, the user must grant permission to the 'ambient-light-sensor' device sensor through the Permissions API.

This feature may be blocked by a Permissions Policy set on your server.

EventTarget Sensor AmbientLightSensor

Device APIs

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.

Browser support

Syntax

Use cases

Use Ambient light sensor

Handle edge cases

Cautions

Accessibility

Related links