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

[Bug Report][3.1.10] v-label (v-checkbox, v-switch, etc) doesn't pass WCAG check #16928

Open
kappaflow opened this issue Mar 16, 2023 · 3 comments

Comments

@kappaflow
Copy link

kappaflow commented Mar 16, 2023

Environment

Vuetify Version: 3.1.10
Vue Version: 3.2.47
Browsers: Chrome 110.0.0.0
OS: Windows 10

Steps to reproduce

Add v-checkbox, v-switch, etc with a label, check contrast taking into account the opacity

Expected Behavior

Probably it should have opacity: var(--v-high-emphasis-opacity)

Actual Behavior

Currently v-label has opacity: var(--v-medium-emphasis-opacity);, so the contrast is 3.27:1 (for a light theme text-color:#8E8E8E, background-color:#8E8E8E)

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Related to #16912

@davycardinaal
Copy link

+1 on this, I also came across this issue.

@crystalfp
Copy link

crystalfp commented Dec 13, 2023

In light mode the contrast is too low. In the attached screenshot the labels are quite readable, but with a normal font and the background white everywhere it is not so readable.
image
Instead In the v-expansion-panel-title the shadow is too contrasting making the title difficult to read.
"vuetify": "^3.4.7"
"vue": "^3.3.11"
"electron": "^28.0.0"

@crystalfp
Copy link

For the v-expansion-panel-title seems the text-shadow is hardcoded in the button styling to #111111. Changing this color to #494949 (or changing the opacity) will makes the titles readable in light mode. Instead for v-tabs buttons seems the shadow color should be lighter, due to the white background. I tried with #898989.
All in all, vuetify with dark theme looks great, with light theme so and so.
BTW, I'm not using any blueprint.

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

3 participants