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

[kappaflow]

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]

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

[crystalfp]

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. 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]

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.