# reduced_transparency

> Whether the user asked the system to reduce transparency, from the prefers-reduced-transparency media query: reduce or none. Reported, not in either id.

Source: https://whiskerjs.com/signals/reduced-transparency/ (last updated 2026-10-27)

**reduced_transparency at a glance (from the library code, signalsVersion 14)**

| Field | Value |
| --- | --- |
| Component name | `reduced_transparency` |
| In the visitorId | no (reported, kept out of both ids) |
| structuredId group | none |
| Hashing | plain value; a digest only when longer than 128 characters or not printable ASCII |
| Excluded under | no browser class |
| Inner timeout | 1000 ms |
| Added in | [signalsVersion 14](https://whiskerjs.com/whats-new/) |
| Collector revision | [1](https://whiskerjs.com/docs/api/#component) (reported as `revision` with every result) |

> **In plain words:**
>
> macOS, iOS and Windows have an accessibility setting that makes see-through panels solid. Some browsers tell web pages whether it is on. WhiskerJS records `reduce` or `none`.

## What it reads

The CSS `prefers-reduced-transparency` media feature through `window.matchMedia()`.

## How the technique works

| Order | Query | Value reported |
| --- | --- | --- |
| 1 | `(prefers-reduced-transparency: reduce)` | `reduce` |
| 2 | `(prefers-reduced-transparency: no-preference)` | `none` |

The first match is reported. When neither matches, the browser does not answer the query: `unavailable` with `no_match`.

## Why it helps

Few people change this setting, so `reduce` is rare. Whether a browser answers at all also tells engines apart: Chromium answers, while Firefox (without its pref) and WebKit do not.

## Stability

A setting the user can change at any time, so it is reported outside both ids. Added in library PR #36 (2026-10-27) at signalsVersion 14: it is outside both ids, so adding it changed no id and needed no version bump.

## Browser support and what blocks it

- Chromium browsers answer it (Chrome 118 and later). In the self-hosted CI browser matrix of PR #36 (23 browsers and channels on Linux, no value varied between collections) every Chromium browser reported `none`.
- Firefox answers it only with the `layout.css.prefers-reduced-transparency.enabled` pref; Safari and WebKit do not answer it. Both were `unavailable` / `no_match` in the CI matrix.
- No browser class excludes it.

## Privacy

An accessibility setting is a setting of the user. Leave it out with `collect({ exclude: ['reduced_transparency'] })` if you do not need it; no id changes.

## How WhiskerJS handles noise and failures

| Status | ruleId | When |
| --- | --- | --- |
| `ok` |   | `reduce` or `none` |
| `unavailable` | `no_api` | no `matchMedia` |
| `unavailable` | `no_match` | neither query matched: the browser does not answer it |
| `blocked` | `threw`, `security_error` | `matchMedia` throws |
| `excluded` | `caller_excluded` | you excluded it |
| `timed_out` | `timeout`, `aborted` | budget or abort |

## Example value

```json
"reduced_transparency": { "status": "ok", "value": "none", "hashed": false, "durationMs": 0.1, "revision": 1 }
```

## Questions and answers

### Which browsers answer prefers-reduced-transparency?

Chromium browsers (Chrome 118 and later, Edge, Brave, Opera, Samsung Internet 25 and later). Firefox only with a pref, Safari not at all; there the component is unavailable with no_match.

### Why is it not in the visitorId?

It is a setting the user can change at any time, so an id built on it could change without the device changing.

## Related pages

- [reduced_motion](https://whiskerjs.com/signals/reduced-motion/): The reduce motion setting, in the id.
- [inverted_colors](https://whiskerjs.com/signals/inverted-colors/): The invert colours setting.
- [prefers_contrast](https://whiskerjs.com/signals/prefers-contrast/): The contrast preference, in the id.