Any way to increase contrast/opacity for focused elements app-wide?

[tjeb]

By default, when elements such as checkboxes and buttons get focus, they either get a shade around them, or their color changes to a lighter version. Even if the contrast of the element itself is well above the minimum, the contrast of this focus indicator is not (around 1.3-1.5, depending on original color).

In order to comply to WCAG requirements, I need the contrast for focus indicators to be at least 3.0. I have been adding red borders on focus to some elements, but there are many issues with this approach.

Is there any way to override the 'focus color/opacity' in a wider context? (like, say, as a theme color option)

Examples from the documentation itself:

• https://vuetifyjs.com/en/components/checkboxes/ first checkbox, focus indicator is light blue, contrast 1.34:1
• https://vuetifyjs.com/en/components/buttons/#depressed contrast of focused blue button compared to unfocused: 1.16:1
  etc

[tjeb]

Much of this extends to the entirety of vuetify, btw, there are many, many places where built-in opacity or use of different shades of grey make vuetify applications non-compliant to WCAG requirements.

[mementototem]

You can override opacity using SASS Variables