PreferenceManager: contrast property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

The contrast read-only property of the PreferenceManager interface returns a PreferenceObject used to override the user's preference for the contrast of the site.

Valid contrast PreferenceObject.value settings are more, less, and no-preference.

Value

A PreferenceObject used to override the user's preference for the contrast of the site.

Examples

Basic usage

This example demonstrates how to query the user's contrast preference.

js
if (navigator.preferences.contrast.value === "more") {
  // The user prefers a high color contrast.
} else if (navigator.preferences.contrast.value === "less") {
  // The user prefers a low color contrast.
} else {
  // The user has stated no preference regarding color contrast.
}

Specifications

Specification
Media Queries Level 5
# contrast-attribute

Browser compatibility