Welcome page does not have sufficient contrast

ManUtopiK commented 3 years ago

I think you should review accessibility of the welcome page. Light green text on white background is very hard to read for some users. It's also the case for all the doc at https://v3.nuxtjs.org

pi0 commented 3 years ago

Feel free to make a PR for improving accessibility. It was a quick draft by team 😅

atinux commented 3 years ago

We shall find a way to have a different primary color for light mode (cc @tahul @smarroufin)

antfu commented 3 years ago

I guess you could use css vars and text-$primary in shortcuts for var(--primary)

flozero commented 2 years ago

mark the pr #37 to follow here

flozero commented 2 years ago

I think it needs to have a new green and also making the text bigger will help on improve the color ratio. As the welcome page is simple having bigger text is not an issue I think. It makes it even better. The primary-700 is good enough but not a green as you want I think.

Screen Shot 2021-10-20 at 3 39 58 PM

ManUtopiK commented 2 years ago

I think also a new green would be better. I don't know why NuxtJS use it's own green and not the official Vue green?.

Nuxt logo:

light green: #80EEC0
dark green: #00DC82

Vue logo: #42b883

With Vue logo color and nuxt logo dark green:

nuxt logo

Source code:

<svg fill="none" height="124" width="124" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m55.75 27.155c-3.222-5.54-11.278-5.54-14.5 0l-35.116 60.38c-3.222 5.54.806 12.465 7.25 12.465h27.413c-2.753-2.407-3.773-6.57-1.69-10.142l26.597-45.588z" fill="#00DC82" fill-rule="evenodd"/><path d="m78 40.4c2.667-4.533 9.333-4.533 12 0l29.06 49.4c2.667 4.533-.666 10.199-5.999 10.199h-58.123c-5.333 0-8.666-5.666-6-10.199z" fill="#42b883"/></svg>

Using a darker green could solve this a11y issue.

soroushCoder commented 2 years ago

This pull request aims to solve these issues: https://github.com/nuxt/ui/pull/62

nuxt / ui-templates

Welcome page does not have sufficient contrast #35