-
-
Notifications
You must be signed in to change notification settings - Fork 286
-
-
Notifications
You must be signed in to change notification settings - Fork 286
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve contrast of code highlighting #2921
Comments
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 --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.) |
That's a cool tool! I think your screenshot in JuliaPluto/lezer-julia#7 (comment) looks really nice, I'm happy to just go with that! I like the new colors! |
hey @savq! could you make a pr with your colors? we can release it together with the new parser |
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 JuliaPluto/lezer-julia#7 so that things "look new"
The text was updated successfully, but these errors were encountered: