# inverted_colors

> Whether the system inverts colours, from the inverted-colors media query: inverted or none. Reported, not in either id.

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

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

| Field | Value |
| --- | --- |
| Component name | `inverted_colors` |
| 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:**
>
> Some systems can turn every colour on the screen into its opposite, an accessibility setting for people who read better that way. Safari tells web pages whether it is on. WhiskerJS records `inverted` or `none`.

## What it reads

The CSS `inverted-colors` media feature through `window.matchMedia()`.

## How the technique works

| Order | Query | Value reported |
| --- | --- | --- |
| 1 | `(inverted-colors: inverted)` | `inverted` |
| 2 | `(inverted-colors: none)` | `none` |

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

## Why it helps

Colour inversion is a rare accessibility setting, so `inverted` is rare. Whether a browser answers at all also tells engines apart: WebKit answers, Chromium does 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

- WebKit answers it (Safari and every iOS browser). In the self-hosted CI browser matrix of PR #36 (23 browsers and channels on Linux, no value varied between collections) Playwright’s WebKit reported `none`.
- Chromium browsers do not answer it, and Firefox only with the `layout.css.inverted-colors.enabled` pref: `unavailable` / `no_match` there 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: ['inverted_colors'] })` if you do not need it; no id changes.

## How WhiskerJS handles noise and failures

| Status | ruleId | When |
| --- | --- | --- |
| `ok` |   | `inverted` 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
"inverted_colors": { "status": "ok", "value": "none", "hashed": false, "durationMs": 0.1, "revision": 1 }
```

## Questions and answers

### Which browsers answer inverted-colors?

Safari and every iOS browser (WebKit). Firefox only with a pref, Chromium browsers 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

- [forced_colors](https://whiskerjs.com/signals/forced-colors/): A forced colour mode, in the id.
- [reduced_transparency](https://whiskerjs.com/signals/reduced-transparency/): The reduce transparency setting.
- [color_scheme](https://whiskerjs.com/signals/color-scheme/): Light or dark mode.