---
title: "usePreferredContrast 用法與示例"
description: "[prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) 媒體查詢。"
canonical: https://reactuse.com/zh-Hant/browser/usepreferredcontrast/
---

# usePreferredContrast

[prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) 媒體查詢

`usePreferredContrast` 使用 `prefers-contrast` 媒體查詢偵測使用者的系統對比度偏好。它回傳一個字串值：`"more"`、`"less"`、`"custom"` 或 `"no-preference"`，並在使用者更改系統設定時即時更新。

### 使用場景

- 根據使用者的對比度偏好調整 UI 色彩和邊框以提升無障礙性
- 為高對比度需求使用者提供替代樣式表或主題
- 記錄使用者的無障礙偏好以改進產品的無障礙支援

### 注意事項

- **SSR 安全**：接受一個 `defaultState` 參數（預設：`"no-preference"`），在 `window.matchMedia` 不可用的伺服器端渲染時回傳。
- **瀏覽器支援**：`prefers-contrast` 媒體查詢在現代瀏覽器中受支援，但可用性有所不同。詳情請參閱 [MDN 相容性](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast#browser_compatibility)。
- **相關 hooks**：基於 `useMediaQuery` 建構。另請參閱 `useReducedMotion` 和 `usePreferredColorScheme` 用於其他無障礙相關的媒體查詢 hooks。

## Usage

```tsx live

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

  return <div>首選對比度：{contrast}</div>;
};

```

%%API%%