Bug: Color differentiation of the code syntax for people who has color vision deficiency

[applegz]

Summary

The color in code snippets might create difficulties for people who are colorblind to tell the difference, especially in the dark mode.

Where did you spot the bug?

I first notice on this page in dark mode, I believe it's the same on every page that has code snippets.

What is the problem?

Current code snippet color with regular rendering in dark mode: Current code snippet color in emulator with deuteranopia vision deficiency in dark mode:

It's also an issue not in the dark mode:

What did you expect to happen?

Everyone should be able to tell the code syntax by just looking at the color. It should be accessible for anybody.

Steps to reproduce the issue

1. Open any Mozilla website that has code snippet in Chrome
2. Open the console
3. Click ... to open more menu
4. Click more tools
5. Select rendering
6. Find emulate vision deficiencies
7. Select different options to see what people might see if they have color vision deficiency

Environment

Device

• [x] Desktop
• [ ] Mobile: ...
• [ ] Tablet: ...
• [ ] Other: ...

Browser

• [x] Chrome: (what version?) 98
• [ ] Firefox: (what version?)
• [ ] Safari: (what version?)
• [ ] Other: (what browser / version?)

Operating system

• [ ] Windows: (what version?)
• [x] Mac OS: (what version?) 12.2.1
• [ ] Linux: (what distribution / version?)

Screenshots

[schalkneethling]

Thank you for reporting @applegz. I am doing a larger investigation into our use of color to ensure we not only meet AA for contrast against the background but, that the color contrast between surrounding content is also appropriate.