bug#30295: CSS mode colour highlighting makes text hard to read

bug#30295: CSS mode colour highlighting makes text hard to read

[Richard Copley]

In CSS mode, the value "green" or "#0f0" or "rgba(0,255,0,0.5)" is
displayed with a white foreground and a 100%-green background, which
is difficult to see.

A white foreground is chosen on even lighter colours, for example,
"#5e5" and "#87e087".

See functions css--contrasty-color in textmodes/css-mode.el and
color-distance in src/xfaces.c, and
<https://debbugs.gnu.org/cgi/bugreport.cgi?bug=25525>, and
<https://www.compuphase.com/cmetric.htm>.

If the color-distance is to be used, the appropriate formula is:

(if (> (color-distance name "black") (color-distance name "white"))
"black" "white")

That formula still maps "green" to "white", but it does at least map
lighter colours such as "#38e038" to "black".

For what it's worth, in my inexpert opinion it makes more sense to
compare the luma against that of mid-grey as Tom originally proposed.

bug#30295: CSS mode colour highlighting makes text hard to read

[Juri Linkov]

> In CSS mode, the value "green" or "#0f0" or "rgba(0,255,0,0.5)" is
> displayed with a white foreground and a 100%-green background, which
> is difficult to see.
>
> A white foreground is chosen on even lighter colours, for example,
> "#5e5" and "#87e087".
>
> See functions css--contrasty-color in textmodes/css-mode.el and
> color-distance in src/xfaces.c, and
> <https://debbugs.gnu.org/cgi/bugreport.cgi?bug=25525>, and
> <https://www.compuphase.com/cmetric.htm>.
>
> If the color-distance is to be used, the appropriate formula is:
>
> (if (> (color-distance name "black") (color-distance name "white"))
> "black" "white")
>
> That formula still maps "green" to "white", but it does at least map
> lighter colours such as "#38e038" to "black".
>
> For what it's worth, in my inexpert opinion it makes more sense to
> compare the luma against that of mid-grey as Tom originally proposed.

Indeed, luma is more suitable than mid-grey, customizing
‘list-colors-sort’ to “luminance” shows that distinguishable colors with
the black foreground start closer to the beginning of the color list.

Or we could use both luma and distance like in ‘shr-color-visible’
with two customizable options:
‘shr-color-visible-luminance-min’ and
‘shr-color-visible-distance-min’.

bug#30295: CSS mode colour highlighting makes text hard to read

[Richard Copley]

On 1 February 2018 at 21:17, Juri Linkov <juri@linkov.net> wrote:

>> If the color-distance is to be used, the appropriate formula is:
>>
>> (if (> (color-distance name "black") (color-distance name "white"))
>> "black" "white")
[...]
>> For what it's worth, in my inexpert opinion it makes more sense to
>> compare the luma against that of mid-grey as Tom originally proposed.
>
> Indeed, luma is more suitable than mid-grey, customizing
> ‘list-colors-sort’ to “luminance” shows that distinguishable colors with
> the black foreground start closer to the beginning of the color list.

I think you and I are in agreement, but to clarify (just in case), the
two options I was talking about were:

1: Choose black if the colour is closer to white than black, in the
color-distance metric (like the Lisp expression I wrote).

2 (better): Choose black if the colour's luma is greater than the luma
of mid-grey, where by mid-grey I meant "#808080", and where I don't
particularly mind what "luma" means.

Eli also mentioned the idea of using the complementary colour (see
#25525) but that can look quite unpleasant due to chromostereopsis,
depending on the surrounding colours. Colour-blind people might also
find it difficult (I'm not sure).

> Or we could use both luma and distance like in ‘shr-color-visible’
> with two customizable options:
> ‘shr-color-visible-luminance-min’ and
> ‘shr-color-visible-distance-min’.

Thanks, a trove of useful functions are in "shr-color.el" and
"color.el". Using color-rgb-to-hsl and extracting the luminance would
make for readable code for option 2.

bug#30295: CSS mode colour highlighting makes text hard to read

[Simen Heggestøyl]

The problem with these colors should now be fixed with Mattias' recent
changes in commit 68ae6faa7f1b4c348740667f98fbf1d1ce5a7979 on
master. Closing.

-- Simen