Update color palette for accessibility

[kartikcho]

The current color palette is too similar for people with color deficiency people to differentiate.

One of the comments from the user feedback: "...was slightly confused why one was red and another blue and thought they indicate bad/good perf"

This PR updates color choices to fix these where the following has been changed,

• Red (commit events) -> Yellow
• Blue (user timing marks) -> Grey
• Purple (measures) -> slightly lighter purple on hover

Resolves #55

Edit: Update snapshot due to a failing test unrelated to the changes made in this PR. Edit 2: Reverted snapshot update which was failing on my machine only (still is, caused by a switched sequence of these lines. Weird.)

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more). To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mlh-fellowship/scheduling-profiler-prototype/80y9bwvsx ✅ Preview: https://scheduling-profiler-prototype-git-a11y-color-update.mlh-fellowship.vercel.app

[taneliang]

As a red-green color deficient person, here's my feedback:

• The commit phase yellows: the unhovered and selected yellows look identical, and the hover yellow looks almost identical to the other 2 yellows
• The commit phase yellows don't pop out of the gray background well enough -- they kinda blend together if the commit phase is short.
• The unhovered render blue and the layout effect blue are an identical sky blue (this is also an issue on master)
• For layout/passive effects, the selected and hovered blues are too similar (on master hovered is clearly a lot darker)

This yellow text is also too bright imo and is hard to read

Also, what did Brian say again about the commit phase reds? I remember he said something about the reds being intentional because if they're too long it's an opportunity for improvement. I also suspect that the red colors for the cascading suspends are intentional. I think the new yellows don't communicate this as well as the reds. Would be great if we could clarify both with him (or if you have then that's great)

[kartikcho]

The commit phase yellows: the unhovered and selected yellows look identical, and the hover yellow looks almost identical to the other 2 yellows

I'll update them to be more accessibly distinct.

The unhovered render blue and the layout effect blue are an identical sky blue (this is also an issue on master)

I think they're distinct enough as is but I'll increase all hover colors to be more noticeable.

For layout/passive effects, the selected and hovered blues are too similar (on master hovered is clearly a lot darker)

They're purple and I'll make the hover purple more distinguishable.

What did Brian say again about the commit phase reds?

Yellow would be a better choice over red as feedback shows that it's confusing users to think it's an error or something. Also, afaik React profiler doesn't use red either so when integrating with the Devtools, this could be another confusing element to the users.

I'll ping @bvaughn to provide clarity on this.

[bvaughn]

What did Brian say again about the commit phase reds?

Yellow would be a better choice over red as feedback shows that it's confusing users to think it's an error or something. Also, afaik React profiler doesn't use red either so when integrating with the Devtools, this could be another confusing element to the users.

React profiler avoids the use of red because of red-green colorblindness concerns. I did some research at the time and found the color gradient DevTools does use (a blue to yellow) was more accessible.

That being said, this profiler is a bit of a different case. Its colors are not a gradient, and it has more distinct concepts needing colors (although admittedly we can also use shapes and placement to differentiate here).

Since we have an easily changeable color config so that we can iterate on these, I'm not overly concerned at this point. In the future at some point maybe we'll even make it configurable (e.g. a high contrast mode).