nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク
https://nostalgic-css.github.io/NES.css/
MIT License
20.49k stars 1.64k forks source link

Fix bad contrast in colors #375

Open lucasjs opened 4 years ago

lucasjs commented 4 years ago

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 commented 4 years ago

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 :thinking: 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 :+1:

lucasjs commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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