Accessibility and colors 🎨

[ann-kilzer]

// Please tag @reustle in your newly created issue
I notice that a lot of colors and font sizes are hard to read, and don't pass WCAG AA accessibility guidelines.

I made a small PR #382 (still pending) recently to fix a light grey against white. With the newest site redesign, there are more opportunities to improve contrast and readability, as thin red text is hard to read.

There are some free tools out there to automate accessibility checking: https://wave.webaim.org/

Happy to take this on if it's something your project desires. Readability not only helps the visually impaired, but has a "curb effect" of making the site clearer for everyone.

[liquidx]

Thanks for the feedback. I agree with that, maybe we should change to a more contrasty colors.

Kay, do you have some feedback on #382? It looks like switching to a darker blue for Tested will help make that more adhere to the accessibility contrast standard.

[Kay-Cube]

Thank you for the feedback of the color. Let's use RGB(6,67,128) [#064380] for Test.
I reduced the brightness and saturation of the blue color we use for recovered.

[liquidx]

Thanks Kay!

Ann, would you be able to update your PR in #382 with the suggested values? I can merge it in then.

[ann-kilzer]

Done! The next places that would be good to fix would be:

1. the small text of Daily New Cases, Daily New Recoveries, Total Active Cases. Since the text is so small, it might make sense to use a black color.

2. The Prefectures like "Tokyo (+472) Saitama (+74) Chiba (+73) Kanagawa (+58) " in Most active regions

3. The "Daily New Cases" subscript

4. Consider making some text bigger, or changing the red to be darker.

Here's the WAVE report on the current page:

https://wave.webaim.org/report#/https://covid19japan.com/

I'd welcome suggestions on specific colors from @Kay-Cube and happy to draft a PR.