You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
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"
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.
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
The text was updated successfully, but these errors were encountered: