savq
commented
1 month ago 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.)
fonsp
Our code does not always have good readable contrast.
For example, strings like
md"""have low contrast, Chrome also points this out:@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"