Improve color for strings (inside errors) in Console

[violasong]

Occasionally we get this terrible clashing magenta-on-pink situation in Console:

Would be great to have a new color here :). Should look into dark mode as well. I suggest looking at other string colors in other parts of DevTools.

[jasonLaster]

i wonder if we could find a substitute for background colors... Perhaps a red left border or style the message differently.

[kriskristin]

I'd like to work on this.

@jasonLaster @violasong is there an exception I can throw into the console to replicate this type of message? Would like to see the whole context. Thanks!

[violasong]

@nchevobbe Hi Nicolas, we're wondering what the best way is to replicate an error like the above screenshot, with lots of key-value info. Could be a handy thing to have in your test app too :)

[nchevobbe]

You can evaluate the following in the console: console.error({magenta: "YESSSSSSSS"}) The "YESSSSSSSS" will be magenta.

i wonder if we could find a substitute for background colors

I like how background colors provide a very distinct look on those messages (ditto for warning).

[kriskristin]

@nchevobbe Thanks

[kriskristin]

If we want a simple color change, here are 2 possible solutions for light mode:

---

And 2 for dark mode:

---

I used colors from Photon and tested for contrast and accessibility.

[kriskristin]

I also have some rough ideas that I can totally explore further, if we want to go this route. It's something along the lines of what @jasonLaster suggested. Taking out the background color and indicating warnings and errors by an expanded, color-coded left border and then highlighting a element by outlining it on hover. Look at mostly concept. I didn't fine tune colors at all.

---

---

---

---

[violasong]

Hi Kristin, thanks for working on this! Looking at the different options, I think my favorite is the text color change to purple due to the nice contrast from the red. Another thought I had is we could actually use the string colors in Debugger, which is navy in light mode and indigo for dark mode:

But ah, I just checked that indigo (#6588FF) and it fails AA :/. We should probably just change that color across the board to e.g. #7B99FF or brighter.

Re: this question in slack:

One thing I noticed is that colors used in dark and light mode are not the same, but similar. Would it be appropriate to use a different color from the same family?

Yeah, originally when choosing these colors I wasn't trying to make the colors an exact match with only a change in lightness in the two themes. In general, we try to reuse already defined colors but feel free it suggest new colors if the existing ones aren't working.

[kriskristin]

As I am testing out colors, it seems like it will be a real challenge to find a color that would be accessible in BOTH light and dark modes. (If I'm wrong here, please tell me.)

I'm putting together some more options today. I have been referencing the searchfox/devtools/.../variables.css as a starting point as well as photon colors and color guidelines. Any other direction I should explore or suggested resources to check out?

[kriskristin]

I've tested accessibility in colors already used in the variables.css file and the photon colors that would be appropriately used here. I am not able to come up with a color that would work in both dark AND light modes. I also want to be sure that the color used communicates 'warning' or 'error'. Take a look at what I have come up with. I used pure photon colors here in light mode and then have shown them in dark mode. Then took them into an accessibility tool and adjusted the colors to pass accessibility tests.

[nchevobbe]

thanks a lot @kriskristin ! I'll defer the final decision to @violasong , but I really like the "Photon red-70" one. The pink used for the dark mode looks good to me

[kriskristin]

thanks for looking it over @nchevobbe. I agree with you that Photon red-70 seems to get the job done most clearly and effectively. There is a thread on the #ux slack channel about possibly defining some equivalent colors to be used in devtools dark mode...I'll plan on testing some other colors based on that feedback.

[kriskristin]

Getting closer:

--red-70 for the warning in light mode

Worked through the progression of creating what would be --red-20 to be used in dark mode.

Both pass AA testing.

[violasong]

Wow, thanks for all your work in analyzing this! This red70/20 pair looks great. (And the -20 color values will be useful for all kinds of purposes.)

Let's get this implemented! I can pass this along to one of the outreachy folks.