Some (dark) calendar colors use black text

VERIFIED FIXED

Status

Calendar
General
--
enhancement
VERIFIED FIXED
11 years ago
10 years ago

People

(Reporter: djst, Assigned: Matthew (lilmatt) Willis)

Tracking

Details

Attachments

(6 attachments, 1 obsolete attachment)

(Reporter)

Description

11 years ago
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.
(Reporter)

Comment 1

11 years ago
Created attachment 242814 [details]
Bad background/text color combination
(Assignee)

Comment 2

11 years ago
Created attachment 242836 [details]
map of what text is used with what bg colors
(Assignee)

Comment 3

11 years ago
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?
Severity: normal → enhancement
(Reporter)

Comment 4

11 years ago
(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.
(Reporter)

Comment 5

11 years ago
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.
(Reporter)

Comment 6

11 years ago
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.
(Assignee)

Comment 7

11 years ago
(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.
(Assignee)

Comment 8

11 years ago
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
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?
(Assignee)

Comment 10

11 years ago
(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

11 years ago
See Bug 248472 for the original discussion on this topic.
(Assignee)

Comment 12

11 years ago
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

10 years ago
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.

 
(Assignee)

Comment 14

10 years ago
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.
Assignee: nobody → lilmatt
Status: NEW → ASSIGNED
Attachment #259701 - Flags: first-review?(mvl)
(Assignee)

Comment 15

10 years ago
Created attachment 259706 [details]
screenshot of new event boxes with this patch
(Assignee)

Comment 16

10 years ago
Created attachment 259707 [details] [diff] [review]
rev1 - fixes typo

I found a typo while testing.
Attachment #259707 - Flags: first-review?(mvl)
(Assignee)

Updated

10 years ago
Attachment #259701 - Attachment is obsolete: true
Attachment #259701 - Flags: first-review?(mvl)
(Reporter)

Comment 17

10 years ago
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 on attachment 259707 [details] [diff] [review]
rev1 - fixes typo

r=mvl
Attachment #259707 - Flags: first-review?(mvl) → first-review+
(Assignee)

Comment 19

10 years ago
Patch checked in on MOZILLA_1_8_BRANCH and trunk

-> FIXED
Status: ASSIGNED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → FIXED

Comment 20

10 years ago
Verified with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4pre) Gecko/20070401 Calendar/0.5pre
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.