Javascript: detect monochrome display

Question

I've been testing an HTML5 webapp on eReaders, and I got it mostly working, but the colors are all messed up (it's monochrome). My app uses lots of colors with an update every second. I need this to run on colored displays as well, so I need to detect if it's monochrome.

The eReader that I'm using is made by Sony, and it reports screen.pixelDepth and screen.colorDepth as both 16, which IS different than most other devices I support (24 and 32 are common).

My ideas so far are:

• Always display monochrome to devices that report 16-bit color
• Sniff from User-Agent / navigator.appVersion
• Sample bits from canvas (though I assume that may lie as well)

Is it safe to assume that 16-bit color = monochrome? Or is there another trick that I could be overlooking that would be more reliable?

Answer 1

In computing, "monochrome" is usually 2 bit, a 16 bit display is usually called greyscale (though it might be in shades of some other colour).

Consider using a palette where the colours convert to appropriate 16 bit values rather than device sniffing. You could start with the web safe colour palette.

Alternatively, give users an option to "use greyscale" if they think that will look better—you may find other users selecting that option too. If your colours are all class based, you could either replace a current stylesheet or add a new one with appropriately reassigned colours.

Answer 2

I'm not familiar with how to detect grey-scale screen, but I hope some color-blind user solution might give you help.

The problem is you need to transmit information by using color but the screen (or color-blind people's eyes) remove some information from the color so the users will be confused. The solution is to make sure the information transmitted by color is not affected by the screens or eyes, and you can also use other media rather than color.

1. Color-blindness or grey-scale screen doesn't remove all information in the color. For example, if color is described as HSL (Hue/Saturation/Light), grey-scale screen removes Hue and Saturation but keeps Light. If you use 5 different colors, as long as they have 5 distinctive Light values (e.g. 0.1, 0.3, 0.5, 0.7, 0.9) users won't have a problem recognize them in grey-scale screen.

2. You can also use other media to transmit the information transmitted by color. For example, Adium for Mac uses both shape and color to indicate contact status. Online user is green rectangle, away is yellow triangle, and busy is red circle. This is color-blindness friendly because users can understand contact status by identifying the shape anyway.