inverted-colors

The inverted-colors CSS media feature can be used to test whether the user agent or underlying OS is inverting colors.

Syntax

The inverted-colors feature is specified as a keyword value chosen from the list below.

none
Colors are displayed normally.
inverted
All pixels within the displayed area have been inverted.

Example

HTML

<p>If you're using inverted colors, this text should be blue on white (the inverse of yellow on black). If you're not, it should be red on light gray.</p>
<p>If the text is gray, your browser doesn't support the `inverted-colors` media feature.</p>

CSS

p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}

Result

Specifications

Specification Status Comment
Media Queries Level 5
The definition of 'inverted-colors' in that specification.
Editor's Draft
Media Queries Level 4
The definition of 'inverted-colors' in that specification.
Candidate Recommendation Deferred to Media Queries Level 5.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
inverted-colors media feature
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 10Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.