Correctly evaluate whether a link color should be shaded or tinted

Created by: ntnz

In its current state, lights are mixed with white, and darks are mixed with black. If the intention is to create contrast, this seems incorrect.

You can see this problem in action in the docs: https://getbootstrap.com/docs/5.0/helpers/colored-links/

Using the .link-light example on the docs page: The link has the color of #f8f9fa.

On hover, the color is lightened to #f9fafb:

requested review from @ghost

Created by: ffoodd

Light links are meant to be used on dark background (e.g. .bg-dark) to provide sufficient contrasts.

Consequently, lightening it on hover provides more contrasts.

I don't think there's something to change here. What am I missing?

Created by: ntnz

Technically you do get more background contrast, but the change is almost not perceivable.

In the case of .link-light, you're mixing a shade that's almost white with 20% more white which doesn't make a noticeable difference. The same applies to .link-dark.

I've made a pen that showcases what I'm talking about. The original side is the unmodified Bootstrap CSS, the modified side contains the PR changes.

Created by: ffoodd

Checking this PR preview, I can confirm you're lowering contrasts on most of colored links on a light background. Simply compare to our current release. So I'm closing this since it does not meet our accessibility efforts—but thanks a lot for submitting this and question the current way.

We need to document background usage, mostly because light, info and warning links should not be used on a light background.

An interesting idea would be to switch between tint and shade depending on background, but ATM we have no way to know which background is used. A custom property on our background utilities could carry a value to determine this and give some context to colored links helper. But we're not there yet.

closed