Default colour of the Disabled items text could be lighter.

Hi,

Can we make the default text colour of Disabled Link (Dropdown and Tab items) bit more lighter? Currently this is pretty close to that of Active item’s text colour.

My suggestion is instead of $gray-600 (#6c757d), we may use $gray-400 (#ced4da) for .disabled class. (src/scss/_variables.scss).

Please see the difference in the following screenshots

Dropdown

Tabs

Also, adding the .disabled class to links might also use a different colour, but when the click is enabled (but the default behaviour is prevented), we could use the same blue colour. However, if the click is not enabled, we might use a lighter colour as well telling that link is available but not clickable. May be we can use the same $gray-400 for this as well!

An use case maybe a role based restrictions.

UPDATE I tried to create a Pull Request instantly at https://github.com/twbs/bootstrap/pull/32473. This is probably not the right way of doing this. Sorry for that.

[patrickhlauke]

it’s the tension between signalling visually that something is disabled, while also actually allowing users to see it properly. even somebody who may have low vision / difficulty in distinguishing colour well may want to be able to see that yes, there’s something there, just that it’s currently disabled - they can get information from that, the same way users with good vision can. but when contrast is too low, they’ll struggle. this is why WCAG defines baseline color contrast ratios that we try to follow…but as it explicitly exempts disabled controls, the ratios don’t apply…

so it’s a case of weighing up “we’re allowed to do it” vs “how far should we go to still make it usable/useful regardless”

[patrickhlauke]

while for disabled controls there’s no direct WCAG minimum contrast requirement, I’d still say that $gray-400 is just a little bit too uncomfortably low (1.5:1 against white). maybe $gray-500 #adb5bd (which gives 2:1 against white) may be a good compromise?