Bug: Color contrast

[brettz9]

URL(s)

https://deploy-preview-6--dreamy-nightingale-a71351.netlify.app/

What did you do?

Look at the color contrast within the code and also the colors within the reported rules.

What did you expect to happen?

See more color contrast

What actually happened?

1. The reported rules are a little visually unclear compared to the old demo (I think related to the darkness of the text and thus the contrast).

2. The old user code theme had more helpful contrasts as far as colors, e.g., strings being reddish in contrast to the blueish variable names. The current green and blue are almost indistinguishable for me. Wonder if CodeMirror has another a theme that would still match the outside theme?

Participation

• [ ] I am willing to submit a pull request for this issue.

Additional comments

No response

[nzakas]

For 1, are you saying it’s hard to distinguish the rule text (“Semicolon missing”) against the background? It’s just a bit hard as someone without color blindness to understand what contrast looks like for you. Do we need to make the text darker? To me, it looks like both the background and the foreground colors are lighter than in the current demo.

For 2, the theme isn’t done yet. We can definitely add green for comments and red for strings. As I mentioned in the chat, let’s wait for Nitin to finish everything up and then we can evaluate it all. We do have a palette of colors to choose from so there are plenty of options.

[brettz9]

For 1, are you saying it’s hard to distinguish the rule text (“Semicolon missing”) against the background?

Right.

It’s just a bit hard as someone without color blindness to understand what contrast looks like for you.

In my case, it's not color blindness, but near vision problems which causes me to need to strain my eyes more to see differences.

Do we need to make the text darker? To me, it looks like both the background and the foreground colors are lighter than in the current demo.

Yes, I'd like to see the text darker, providing greater contrast with the lighter background.

For 2, the theme isn’t done yet. We can definitely add green for comments and red for strings. As I mentioned in the chat, let’s wait for Nitin to finish everything up and then we can evaluate it all. We do have a palette of colors to choose from so there are plenty of options.

Ok, cool.

[nzakas]

Thanks, this is helpful. Once Nitin is done, we can play with the colors some more.

[nzakas]

I tried looking at this today, and I'm wondering if it's not the contrast that is the problem but rather the font we are using. Here is the Playground as designed:

And here is the Playground using the same colors of the current demo:

To me, the demo colors actually look worse and make the message more difficult to read. So, I'm wondering if maybe it's the font that is making the text harder to read?

[brettz9]

I think both could be improved on. The original design has more contrast relatively between the darker text and the lighter background but suffers from needing some strain to see the text given that its absolute degree of darkness is quite low (perhaps the nature of the font), while the current form's text has the advantage that its text is overall darker and thus easier to make out but it suffers from there being too small of a relative difference in color since the background color is darker too. I would expect using the original design's lighter pink background with some bolding of the text should help.

[nzakas]

Sorry, when you say “original” and “current”, what do you mean? It would help if you could say “playground” and “demo” for clarity.

One constraint that we have is we designed a whole color palette for the app so the colors all flow together. You can see the palette here: https://github.com/eslint/play.eslint.org/blob/main/src/assets/scss/tokens/themes.scss

We’d like to stay within that selection of colors.

Do you want to play with the current design and come up with some alternatives for us to consider?

[brettz9]

Sorry, by "original" I meant what you called "playground as designed", and "current", I meant the "using the same colors of the current demo" (by "current demo" I had understood you as saying the design had since undergone some changes since the docs).

The colors alone, even with the heaviest font-weight applied and color contrast increased, are not strong enough.

I feel the following declaration changes produce a more helpfully contrasting result:

.alert {
    /* Unfortunately, the mono one is just too unreadable */
    font-family: var(--text-font);
}
.alert__text {
    /* A little dark, but livable (and 400 is too light) */
    font-weight: 500;
}
.alert.alert--error {
  /* Darkening the color helps considerably; if too dark, 700 is livable */
  color: var(--color-rose-800)
}

[nzakas]

The last entry should be background-color?

[brettz9]

No, sorry ,color. I just updated that and the misleading comment.

[nzakas]

Ah ok. Got it. Can you create a PR with this treatment so we can see how it looks live?

[brettz9]

Ah ok. Got it. Can you create a PR with this treatment so we can see how it looks live?

Sure, filed #20.