prefers-contrast

Prefers contrast

Prefers contrast is a package that tells you whether a user prefers increased contrast. It's based on the CSS @media (prefers-contrast), which is part of Media Queries Level 5. It's around 700 bytes minified, 300 bytes gzipped.

Usage

Add the dependency from NPM:

npm install prefers-contrast

Import the package:

import prefersContrast from "prefers-contrast";

Then call the function:

const contrastPreference = prefersContrast();
// Returns "high", "low" or "no-preference"

Browser support

This package only works in browsers that natively support @media (prefers-contrast), so it just returns "no-preference" in unsupported browsers. Current browser support

By passing false as the argument, you can get "unsupported" as the value for unsupported browsers:

const contrastPreference = prefersContrast(false);
// Returns "high", "low", "no-preference", or "unsupported"

Development

Install dependencies:

yarn

Compile Typescript to ES6 before publishing to NPM:

yarn build

Media Queries Level 5

• prefers-reduced-motion · GitHub · NPM
• prefers-color-scheme · GitHub · NPM
• prefers-contrast · GitHub · NPM
• prefers-reduced-transparency · GitHub · NPM
• inverted-colors · GitHub · NPM
• environment-blending · GitHub · NPM
• light-level · GitHub · NPM

License

MIT