Make sure that everything on the website is legible

Kubiverse / Cube-Zone

MIT License

4 stars 0 forks source link

Make sure that everything on the website is legible #19

Open Zoe7 opened 4 years ago

Zoe7 commented 4 years ago

There are a bunch of things on the website that are really hard to read because of the poor contrast between the text and background color.

It would be nice to make sure that everything is legible and to follow the WCAG's guidelines for contrast as much as possible.

Some of the things that need to be updated to be more readable are:

[x] Snackbars: The contrast between the text and the background is not high enough, and the hardcoded pink color for the "close" button is barely visible on some of the backgrounds.
[ ] Primary color: in both the dark and light theme, any component that uses the primary color for the text's color on a dark/light background isn't visible enough. That includes for example, links, tabs, text buttons.

Zoe7 commented 4 years ago

I've got a PR that's almost ready to fix the snackbars btw 😄

big213 commented 4 years ago

Nice! I think this is all good and important. Haven't really paid too much attention to the overall aesthetics so far. I've pretty much just gone with the default color theme that came with the starter app.

By the way, the vuetify themes can be found in the nuxt.config.js file in the root directory. Predefined colors can be found here: https://vuetifyjs.com/en/styles/colors/

And of course, you could also just use the raw html color codes.

Feel free to experiment with some themes/colors, I'm really quite clueless when it comes to this stuff!

Zoe7 commented 4 years ago

I've pretty much just gone with the default color theme that came with the starter app

I was looking a little bit into their issues etc. and I found a few that also complained about their default theme not being that great for accessibility. All of the issues where closed though 😞 Bit of a shame, it'd help a lot of people if the default was better.

Feel free to experiment with some themes/colors, I'm really quite clueless when it comes to this stuff!

Yeah, I'm not the best when it comes to pure design tasks, but I'll give it a try and see if I can come up with! 😄 There's overall a few improvements that we can make to the looks of the app and feel of the app, I'll try working on that bit by bit.