Media query tests - color, color-index, and monochrome

Back to index.

Three media queries having to do with colors. In general none of them is very useful — as yet.


CSS3 spec | CSS4 spec

The color media query gives the number of bits per color that the device uses. In practice this is usually 8.

color values


CSS3 spec | CSS4 spec

The color-index media query returns the number of entries in the device’s color lookup table. In practice this is always 0; I’m still looking for a device that returns a different value.

color-index units

color-index values


CSS3 spec | CSS4 spec

The monochrome media query tells you if the device is monochrome. That said, I ever tested only on one monochrome device, an old Kindle, and it told me it was not a monochrome device. So much for this media query.

monochrome values


CSS4 spec

The inverted-colors media query tells you if the device has inverted the colors — usually for accessibility reasons.