Improve disabled state visibility for Tabs and other components

[alexchexes]

Environment

• Operating System: Windows 11
• Browser: Chrome 131

Is this bug related to Nuxt or Vue?

Nuxt UI

Version

v2.20.0, 3.0.0-alpha-x

Reproduction

Tabs and Input#disabled sections of ui.nuxt.com, as well as pretty much every other component that has a "Disabled" state, demonstrate the issue

Description

The current styling for disabled state of different components in Nuxt UI has a very subtle visual distinction from the enabled state. On a monitor with good sRGB calibration (Gigabyte M32U - IPS, 4K, sRGB mode), the grayed-out appearance of the disabled state in almost every Nuxt UI component (as shown on the ui.nuxt.com/components) is almost indistinguishable from the non-disabled state.

Issue:

• Disabled elements do not provide a clear visual cue, making it hard for users to differentiate their state at a glance.
• This affects usability and accessibility, especially for users with mild visual impairments or varying screen settings.

Suggestion:

Consider increasing contrast differences or adding clearer indicators (e.g., opacity) to improve visual accessibility for disabled elements.

Example:
Tabs and Input#disabled sections of ui.nuxt.com, as well as pretty much every other component that has a "Disabled" state, demonstrate the issue.

Video (may look different on your monitor):
Nuxt UI 2.20.0:

chrome_2024-12-29--13-32-13--168.mp4

Nuxt UI 3.0.0-alpha-x:

chrome_2024-12-29--13-31-22--996.mp4

Photos of how it looks like on the mentioned monitor:

Additional context

No response

Logs