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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
contrast
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.