357329 - Some (dark) calendar colors use black text

Status: VERIFIED FIXED

(Calendar :: General, enhancement)

Description

[David Tenser [:djst]]

Some of the calendar colors available in the calendar properties window are too dark to use black text, but black text is used anyway. See screenshot for example.

Comment 1

[David Tenser [:djst]]

Attachment: Bad background/text color combination

Comment 2

[Matthew (lilmatt) Willis]

Attachment: map of what text is used with what bg colors

Comment 3

[Matthew (lilmatt) Willis]

From http://lxr.mozilla.org/mozilla/source/calendar/resources/content/calendarUtils.js#456

"Consider all colors with less than 50% Lightness as dark colors and use white as the foreground color; otherwise use black. Actually we use a threshold a bit below 50%, so colors like #FF0000, #00FF00 and #0000FF still get black text which looked better when we tested this."

I wonder if with the wide(r)spread use of LCDs now, it's still the case that black looks better with those saturated colour values.

I also wonder if the folks who set that threshold took the platform gamma differences into consideration.

David:
I can tell you're on Windows XP from the screenshot. Are you using a CRT or an LCD monitor?

Comment 4

[David Tenser [:djst]]

(In reply to comment #3)
> I also wonder if the folks who set that threshold took the platform gamma
> differences into consideration.
> 
> David:
> I can tell you're on Windows XP from the screenshot. Are you using a CRT or an
> LCD monitor?
> 

I have tested this with two LCD monitors, the build-in screen in my Dell Latitude D620 and a standalone Samsung SyncMaster something. Are you saying this color combination works on a CRT monitor? I would quess white is much more readable with that fairly dark blue on any screen type.

Comment 5

[David Tenser [:djst]]

Blue is one of the darkest colors to the human eye. Therefore the current color map is not well designed because it even has more blue colors with black text than it has red colors.

The color I took as an example is very similar to the one used in Windows XP's window title. Windows XP even has a brighter blue in the task bar that still has white text. Surely there must be a valid reason why they didn't choose black text on that blue background.

Comment 6

[David Tenser [:djst]]

Attachment: New color map suggestion

This would probably be more readable for most people. Of course, it wouldn't hurt to have a subtle dark shadow around the text as is the case with the Windows XP titlebar text.

Comment 7

[Matthew (lilmatt) Willis]

(In reply to comment #4)
> Are you saying this color combination works on a CRT monitor?

It might have looked acceptable on CRTs with the variations of brightness and contrast. The proliferation of LCDs since the threshold was picked likely has shifted the what is acceptable.

Perhaps we need to either move the threshold, or weight blue differently when computing a colour's Lightness.

Comment 8

[Matthew (lilmatt) Willis]

Using xpcshell I checked the computed lightness of all colours in the colourpicker.  The ones marked with * are the ones David is suggesting be changed. Blank lines mark the end of a row in the colourpicker.

Note that simply moving the threshold from 120 to 128 wouldn't affect a number of these. 

#FFFFFF L:255 black
#FFCCCC L:229.5 black
#FFCC99 L:204 black
#FFFF99 L:204 black
#FFFFCC L:229.5 black
#99FF99 L:204 black
#99FFFF L:204 black
#CCFFFF L:229.5 black
#CCCCFF L:229.5 black
#FFCCFF L:229.5 black

#CCCCCC L:204 black
#FF6666 L:178.5 black
#FF9966 L:178.5 black
#FFFF66 L:178.5 black
#FFFF33 L:153 black
#66FF99 L:178.5 black
#33FFFF L:153 black
#66FFFF L:178.5 black
#9999FF L:204 black
#FF99FF L:204 black

#C0C0C0 L:192 black
#FF0000 L:127.5 black
#FF9900 L:127.5 black
#FFCC66 L:178.5 black
#FFFF00 L:127.5 black
#33FF33 L:153 black
#66CCCC L:153 black
#33CCFF L:153 black
#6666CC L:153 black *
#CC66CC L:153 black

#999999 L:153 black
#CC0000 L:102 white
#FF6600 L:127.5 black
#FFCC33 L:153 black
#FFCC00 L:127.5 black
#33CC00 L:102 white
#00CCCC L:102 white
#3366FF L:153 black *
#6633FF L:153 black *
#CC33CC L:127.5 black *

#666666 L:102 white
#990000 L:76.5 white
#CC6600 L:102 white
#CC9933 L:127.5 black
#999900 L:76.5 white
#009900 L:76.5 white
#339999 L:102 white
#3333FF L:153 black *
#6600CC L:102 white
#993399 L:102 white

#333333 L:51 white
#660000 L:51 white
#993300 L:76.5 white
#996633 L:102 white
#666600 L:51 white
#006600 L:51 white
#336666 L:76.5 white
#000099 L:76.5 white
#333399 L:102 white
#663366 L:76.5 white

#000000 L:0 white
#330000 L:25.5 white
#663300 L:51 white
#663333 L:76.5 white
#333300 L:25.5 white
#003300 L:25.5 white
#003333 L:25.5 white
#000066 L:51 white
#330099 L:76.5 white
#330033 L:25.5 white

Comment 9

[Michiel van Leeuwen (email: mvl+moz@)]

Maybe we should use the YUV model, and use the Y-value to check the lightness of the background.
http://en.wikipedia.org/wiki/YUV
Anybody up for doing some testing?

Comment 10

[Matthew (lilmatt) Willis]

(In reply to comment #9)
> Maybe we should use the YUV model, and use the Y-value to check the lightness
> of the background.
> http://en.wikipedia.org/wiki/YUV
> Anybody up for doing some testing?

I've got a test case written already. I'll take a look.

Comment 11

[Stefan Sitter [:ssitter]]

See Bug 248472 for the original discussion on this topic.

Comment 12

[Matthew (lilmatt) Willis]

Attachment: YUV/HSL comparison

This image shows YUV on the top, existing HSL on the bottom, and David's suggested  chart on the side.

We're close, but the saturated red (#ff0000) is problematic. On my Mac I feel the white is more readable, but on mvl's Linux box he feels black is. ctalbert saw it similarly. Windows == black on red, but Mac == white on red.

mvl tried to adjust the formula to take gamma into consideration, but it didn't appear to change the situation much.

Comment 13

[gekacheka]

For me, looking at the attachments via windows with color lcd screen, with no colorblindness, and both white-on-red and black-on-red are legible, but white-on-red is more legible (contrary to ctalbert's screen).

Also, white on red is necessary to be legible for people with monochrome screens, and for people with with achromatopsia colorblindness (no cones or low cones) according to my trials on
  http://colorlab.wickline.org/colorblind/colorlab/

 1. in palette click red   (FF0000 tooltip)
 2. in palette click black (000000 tooltip)

 Example blocks in bottom frame now include a block with
 red background containing some black text and white text.

 3. click "show simulation controls"

 4. select "normal trichromatic color vision", 
    select "monochrome monitor"

 red background appears dark gray.  
 black text is nearly illegible.  white text is much more legible.

 5. select "color monitor"
    select "typical achromatopsia" 

 red background appears dark gray.  
 black text is nearly illegible.  white text is much more legible.

 6. select "color monitor"
    select "atypical achromatopsia" 

 red background appears dark maroon.  
 black text is legible but difficult.  white text is much more legible.

 

Comment 14

[Matthew (lilmatt) Willis]

Attachment: rev0 - use YUV rather than HSL

I've had this in my tree for quite some time.
It results in the top example in attachment 242899 [details].

Given gekacheka's comments regarding colourblindness, I'm inclined to go with YUV.

Comment 15

[Matthew (lilmatt) Willis]

Attachment: screenshot of new event boxes with this patch

Comment 16

[Matthew (lilmatt) Willis]

Attachment: rev1 - fixes typo

I found a typo while testing.

Comment 17

[David Tenser [:djst]]

Quite an improvement both color-wise and aesthetically. Seems to fix the issues I had with the background/foreground color choices perfectly.

Makes the underlying table background look a bit dull in comparison though, but that's another bug report. :)

Comment 18

[Michiel van Leeuwen (email: mvl+moz@)]

Comment on attachment 259707 [details] [diff] [review]
rev1 - fixes typo

r=mvl

Comment 19

[Matthew (lilmatt) Willis]

Patch checked in on MOZILLA_1_8_BRANCH and trunk

-> FIXED

Comment 20

[Omar Bajraszewski]

Verified with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4pre) Gecko/20070401 Calendar/0.5pre