MLH-Fellowship / scheduling-profiler-prototype

Custom profiler prototype for React's concurrent mode
https://react-scheduling-profiler.vercel.app/
6 stars 0 forks source link

Update color palette for accessibility #126

Closed kartikcho closed 4 years ago

kartikcho commented 4 years ago

The current color palette is too similar for people with color deficiency people to differentiate. Made hover colors much darker in contrast and set user timing marks to grey color.

This is a re-PR that addresses comments from #113 and resolves #55

image

vercel[bot] commented 4 years ago

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/oi3vuhzeu ✅ Preview: https://scheduling-profiler-prototype-git-color-a11y.mlh-fellowship.vercel.app

taneliang commented 4 years ago

The new user timing mark colors are nice!

I like that the yellows have been reverted. The colors are also almost the same as the ones on master, which I guess is a good thing? I didn't have a problem with the blue hover colors on master, so I can't really say if this fixed any accessibility issues (I didn't run this through any color filters so I'm not sure if people with protanopia or other color deficiencies will appreciate any of the changes here).

Unfortunately, this does mean that the accessibility issues I had from master aren't fixed in this PR:

Happy to approve this as is even though it doesn't resolve #55 imo. We can always make another PR in the future to resolve that.

kartikcho commented 4 years ago

I've updated the colors again. Red is significantly darker now on hover. Also layout effects are purple but almost similar in contrast with unhovered render blues.

I've changed the contrast of layout effects but if you're still having trouble, you can select a shade for it.

Let me know if you can distinguish now @taneliang!