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 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 AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox No support NoIE No support NoOpera No support NoSafari Full support YesWebView Android ? Chrome Android No support NoEdge Mobile ? Firefox Android No support NoOpera Android No support NoSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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.

Document Tags and Contributors

Last updated by: connorshea,