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

Fix bad contrast in colors #375

Open
lucasjs opened this issue Oct 29, 2019 · 4 comments
Open

Fix bad contrast in colors #375

lucasjs opened this issue Oct 29, 2019 · 4 comments
Labels
discussion Discussion of changes or bikeshedding enhancement New feature or request

Comments

@lucasjs
Copy link
Contributor

lucasjs commented Oct 29, 2019

Is your feature request related to a problem? Please describe.
When you try to check the audits, Lighthouse says that almost all colors have a bad contrast:

Screen Shot 2019-10-29 at 04 14 10

Screen Shot 2019-10-29 at 04 14 25

Describe the solution you'd like
I can edit all colors to have a better contrast. I've been working with A11Y for a few years.

Describe alternatives you've considered

I think we can match at least AA to help our color blind users.
Screen Shot 2019-10-29 at 04 18 09

@guastallaigor guastallaigor added discussion Discussion of changes or bikeshedding enhancement New feature or request labels Oct 29, 2019
@guastallaigor
Copy link
Member

I looked into it a while back, but the main reason is because of this issue #27.
Another issue to reference is this #260.
So, right now the project is using the actual NES color palette.
Of course when put into the browser and in the context of a11y, the colors doesn't look very good, but I'm not sure if changing the colors to prioritize a11y over using the actual NES color palette is a good choice 🤔
Also there's this issue #331, which basically means that sometime in the future (if all goes well), anyone will be able to change and use your own color theme.
I will leave this issue opened for others say their opinion about this here 👍

@lucasjs
Copy link
Contributor Author

lucasjs commented Oct 29, 2019

Prioritize a11y is always a good choice. It's not for google or any company, but for color blind users.
https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939

These issues have nothing with a11y, but just about design.
There are a lot of project that look so much better with accessible colors.

@BcRikko
Copy link
Member

BcRikko commented Oct 31, 2019

@guastallaigor Thanks for your response 😆👍


I was also aware of this issue when I improved the performance of the demo page.
I think accessibility is important. 👍

However, many sites use NES.css via the CDN, so we have to be careful about changing colors. 🤔
It would be better to change the color so that the appearance doesn't change much, but it's difficult. 😭

Please let me think about how to deal with it. 🙇

@lucasjs
Copy link
Contributor Author

lucasjs commented Oct 31, 2019

@BcRikko LGTM! I can make some changes and open a WIP Pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion Discussion of changes or bikeshedding enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants