Skip to content
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

Open
fonsp opened this issue May 16, 2024 · 2 comments
Open

Improve contrast of code highlighting #2921

fonsp opened this issue May 16, 2024 · 2 comments
Labels
accessibility Accessibility improvements of the frontend, like screen reader support and internationalization frontend Concerning the HTML editor wide audience This affects a wide audience of Pluto users and future Pluto users

Comments

@fonsp
Copy link
Owner

fonsp commented May 16, 2024

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 JuliaPluto/lezer-julia#7 so that things "look new"

@fonsp fonsp added frontend Concerning the HTML editor accessibility Accessibility improvements of the frontend, like screen reader support and internationalization wide audience This affects a wide audience of Pluto users and future Pluto users labels May 16, 2024
@savq
Copy link
Contributor

savq commented May 16, 2024

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
Copy link
Owner Author

fonsp commented May 17, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Accessibility improvements of the frontend, like screen reader support and internationalization frontend Concerning the HTML editor wide audience This affects a wide audience of Pluto users and future Pluto users
Projects
None yet
Development

No branches or pull requests

2 participants