inverted-colors

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The inverted-colors CSS media feature is used to test if the user agent or the underlying operating system has inverted all colors.

Inversion of colors can have unpleasant side effects, such as shadows turning into highlights, which can reduce the readability of the content. Using this media feature, you can detect if inversion is happening and style the content accordingly while respecting user preference.

Syntax

css

/* Keyword value */
@media (inverted-colors: inverted) {
  /* styles to apply if inversion of colors is detected */
}

The inverted-colors feature is specified as one of the following keyword values:

none: Indicates that the colors are displayed normally and no inversion of colors has happened. This keyword value evaluates as false.
inverted: Indicates that all pixels within the displayed area have been inverted. This keyword value evaluates as true.

Examples

Applying styles if color inversion is detected

This example demonstrates the effects of both inverted-colors media feature keyword values and when the inverted-colors media feature is not supported.

HTML

html

<p>
  If color inversion is detected, this text will appear blue on white (the
  inverse of yellow on black) along with a line over the text. If no color
  inversion is happening, the text will appear red on light gray without the
  line over the text.
</p>
<p>
  If the text is gray and no overline is present, it means your browser doesn't
  support the
  <code>inverted-colors</code> media feature.
</p>

CSS

css

p {
  color: gray;
}

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

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

Result

Specifications

Specification
Media Queries Level 5 # inverted

Browser compatibility

BCD tables only load in the browser