Last Comment Bug 357329 - Some (dark) calendar colors use black text
: Some (dark) calendar colors use black text
Status: VERIFIED FIXED
:
Product: Calendar
Classification: Client Software
Component: General (show other bugs)
: Trunk
: x86 All
: -- enhancement (vote)
: ---
Assigned To: Matthew (lilmatt) Willis
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2006-10-19 16:03 PDT by David Tenser [:djst]
Modified: 2007-04-01 12:03 PDT (History)
3 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
Bad background/text color combination (18.48 KB, image/png)
2006-10-19 16:05 PDT, David Tenser [:djst]
no flags Details
map of what text is used with what bg colors (34.46 KB, image/png)
2006-10-19 22:44 PDT, Matthew (lilmatt) Willis
no flags Details
New color map suggestion (32.28 KB, image/png)
2006-10-20 04:15 PDT, David Tenser [:djst]
no flags Details
YUV/HSL comparison (254.98 KB, image/png)
2006-10-20 12:02 PDT, Matthew (lilmatt) Willis
no flags Details
rev0 - use YUV rather than HSL (1.76 KB, patch)
2007-03-26 11:09 PDT, Matthew (lilmatt) Willis
no flags Details | Diff | Review
screenshot of new event boxes with this patch (26.67 KB, image/png)
2007-03-26 11:32 PDT, Matthew (lilmatt) Willis
no flags Details
rev1 - fixes typo (1.76 KB, patch)
2007-03-26 11:34 PDT, Matthew (lilmatt) Willis
mvl: first‑review+
Details | Diff | Review

Description David Tenser [:djst] 2006-10-19 16:03:56 PDT
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] 2006-10-19 16:05:45 PDT
Created attachment 242814 [details]
Bad background/text color combination
Comment 2 Matthew (lilmatt) Willis 2006-10-19 22:44:11 PDT
Created attachment 242836 [details]
map of what text is used with what bg colors
Comment 3 Matthew (lilmatt) Willis 2006-10-19 22:57:04 PDT
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] 2006-10-20 02:53:13 PDT
(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] 2006-10-20 04:14:31 PDT
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] 2006-10-20 04:15:48 PDT
Created attachment 242859 [details]
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 2006-10-20 08:42:58 PDT
(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 2006-10-20 09:35:49 PDT
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@) 2006-10-20 10:00:13 PDT
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 2006-10-20 10:01:06 PDT
(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 2006-10-20 10:11:16 PDT
See Bug 248472 for the original discussion on this topic.
Comment 12 Matthew (lilmatt) Willis 2006-10-20 12:02:32 PDT
Created attachment 242899 [details]
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 2007-02-17 05:46:23 PST
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 2007-03-26 11:09:17 PDT
Created attachment 259701 [details] [diff] [review]
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 2007-03-26 11:32:45 PDT
Created attachment 259706 [details]
screenshot of new event boxes with this patch
Comment 16 Matthew (lilmatt) Willis 2007-03-26 11:34:16 PDT
Created attachment 259707 [details] [diff] [review]
rev1 - fixes typo

I found a typo while testing.
Comment 17 David Tenser [:djst] 2007-03-26 23:53:27 PDT
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@) 2007-03-31 02:36:33 PDT
Comment on attachment 259707 [details] [diff] [review]
rev1 - fixes typo

r=mvl
Comment 19 Matthew (lilmatt) Willis 2007-03-31 12:09:11 PDT
Patch checked in on MOZILLA_1_8_BRANCH and trunk

-> FIXED
Comment 20 Omar Bajraszewski 2007-04-01 12:03:51 PDT
Verified with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4pre) Gecko/20070401 Calendar/0.5pre

Note You need to log in before you can comment on or make changes to this bug.