Pluto.jl icon indicating copy to clipboard operation
Pluto.jl copied to clipboard

Improve contrast of code highlighting

Open fonsp opened this issue 1 year ago • 3 comments

Our code does not always have good readable contrast.

For example, strings like md""" have low contrast, Chrome also points this out:

image

@savq Offered to investigate this (which scoring function should be used for contrast?) and maybe make a new color theme for us! It might be fun to release it together with https://github.com/JuliaPluto/lezer-julia/pull/7 so that things "look new"

fonsp avatar May 16 '24 10:05 fonsp

To calculate color contrast accurately we should use the APCA/WCAG3 lightness contrast function.

The current Web Content Accessibility Guidelines v2 (WCAG2) contrast ratio has several problems. The most notable one is that it overestimates the contrast of dark colors, so a dark theme with colors that pass WCAG2 might actually be unreadable.

Besides following WCAG3, we should also consider using a perceptually uniform color space like oklab/oklch. Since it's much easier to choose colors that have a nice contrast. These color spaces are included in CSS colors level 4 (most browsers support it since early 2023).

For reference here are some examples of current lightness contrast against the normal cell background #FEFCF5:

--cm-comment-color:  #E96BA8; /* Lc = 53.5 */
--cm-number-color:   #815BA4; /* Lc = 74.3 */
--cm-property-color: #B67A48; /* Lc = 61.4 */
--cm-keyword-color:  #EF6155; /* Lc = 56.9 */
--cm-string-color:   #DA5616; /* Lc = 64.1 */
--cm-var-color:      #5668A4; /* Lc = 74.8 */
--cm-macro-color:    #5C8C5F; /* Lc = 64.6 */

The passing grade (like the WCAG2 ratio 4.5:1) is Lc 75. 😬

Most colors can be adjusted by lowering the lightness. However, the colors for keywords and strings will be harder to differentiate (they're already pretty close reddish colors), so it might be a good idea to use an entirely different color for strings (I'd personally prefer a green/blueish color.)

savq avatar May 16 '24 18:05 savq

That's a cool tool! I think your screenshot in https://github.com/JuliaPluto/lezer-julia/pull/7#issuecomment-2111063451 looks really nice, I'm happy to just go with that! I like the new colors!

fonsp avatar May 17 '24 08:05 fonsp

hey @savq! could you make a pr with your colors? we can release it together with the new parser

fonsp avatar Aug 10 '24 19:08 fonsp