usePreferredContrast

prefers-contrast media query

usePreferredContrast uses window.matchMedia() to reactively track the user’s contrast preference. It returns "more", "less", "custom", or "no-preference" based on the prefers-contrast media query. The value updates automatically when the user changes their system accessibility settings.

When to Use

• Increasing border widths, font weights, or color contrast for users who prefer more contrast
• Reducing visual intensity for users who prefer less contrast
• Building accessible interfaces that adapt to system-level contrast preferences

Notes

• SSR-safe: Accepts a defaultState parameter (default: "no-preference") that is returned during server-side rendering. No window.matchMedia access occurs on the server.
• Browser support: The prefers-contrast media query is supported in modern browsers, but availability varies. Check MDN compatibility for details.
• Related hooks: Built on useMediaQuery. See also useReducedMotion and usePreferredColorScheme for other accessibility-related media query hooks.

Usage

function Demo() {
  const contrast = usePreferredContrast();

  return <div>PreferredContrast: {contrast}</div>;
};

API

usePreferredContrast

Returns

Contrast

Arguments

Contrast

Type

export type Contrast = 'more' | 'less' | 'custom' | 'no-preference'