Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation website colors are eye-straining on Firefox on a Mac #573

Open
richardxia opened this issue Apr 5, 2021 · 0 comments
Open

Comments

@richardxia
Copy link

Summary

tl;dr: Firefox on a Mac has a bug that causes the green background on the polished documentation site to be blindingly bright. Would you be open to changing the color?

I think this bug may only affect computers with displays that support a wide range of colors, which notably includes almost all Macs. On a 2019 16" MacBook Pro, which has a builtin display that supports the P3 color space, Firefox will incorrectly render the background color of the documentation website in a relatively bright and saturated green, as opposed to Chrome and Safari, which will correctly render it in a duller green.

Basic Example

Here are some comparison screenshots:

Firefox

Screen Shot 2021-04-05 at 1 18 14 PM

Chrome

Screen Shot 2021-04-05 at 1 18 22 PM

Note that the screenshots don't quite do it justice, since viewing it a web browser that covers more of the screen makes the background color feel even brighter, and it tires my eyes more the longer I view it.

Reasoning

It seems that this may be an issue in Firefox, where Firefox is not properly translating the CSS colors from the web's native color space, the sRGB color space, to the display's native color space, in my case P3.

I used the macOS Digital Color Meter application to measure the actual rendered colors expressed in the sRGB color space, and I can confirm that Firefox is doing something weird:

Firefox

Screen Shot 2021-04-05 at 1 23 21 PM

Chrome

Screen Shot 2021-04-05 at 1 22 36 PM

As you can see, the actual rendered colors on Chrome almost exactly match the hex colors specified in the CSS (#65daa2 == rgb(101, 218, 162)), but Firefox ends up with an extremely low value for the red channel. This is likely due to the fact that the P3 color space covers a lot more in the green area of the visible spectrum of colors, so when Firefox doesn't properly translate colors, the greens end up being distorted the most. See the following diagram of the color spaces overlaid on top of each other:
2d-srgb-applep3

(Image credit: http://www.astramael.com/)

Suggested fixes

If you could pick a less saturated green for the background, I think that would help make the Firefox rendering of the page less saturated, even if the color is still a bit wrong in Firefox.

Another solution would be to pick a primary brand color with a hue that is further away from pure green, since the distortions would be smaller anywhere else in the color space.

I realize that this is strange request, and I understand if this isn't something you want to change, especially because this ultimately is a Firefox bug that only affects certain displays. I certainly work around this by just viewing the docs in a different browser than Firefox.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants