Breadcrumbs text and default links fail contrast ratio

[patrickhlauke]

https://v5.getbootstrap.com/docs/5.0/components/breadcrumb/

The active text/separator for breadcrumbs uses #6c757d on #e9ecef with a contrast ratio of 4:1. The default links in breadcrumbs use #0d6efd on #e9ecef with a contrast ratio of 3.8:1.

bumping the text/separator from $gray-600 to $gray-700 (#495057) shoots up the contrat to 6.9:1. For the links, however, there's very little wiggle room ... not sure how/if that can be tackled - #0d6efd has a ratio of 4.5:1 only against pure white, so even lightening the breadcrumbs background a bit won't help

[patrickhlauke]

maybe dropping the background completely on breadcrumbs and going for a thin gray border instead?

[ffoodd]

I think I suggested that somewhere. Honestly I'd drop both background and borders, to simplify theming.

[ffoodd]

To complement my previous comment, adding background, border or radii is really, really easy thanks to our utilities. So apart from spacings, I'd say this component should definetely be simpler — and as an argue, the vast majority of breadcrumlbs out on the web are much simpler than our current one.

[mdo]

Let's drop the background, border, and padding then. The main use of a breadcrumb component then is purely to use add a separator between nested items. I can dig that. I'm also thinking we use a local CSS var for the separator: https://codepen.io/emdeoh/pen/KKMOoGx. Note that the first example I tried using a data attribute, but that doesn't work as it doesn't seem to be exposed to the children elements.

[ffoodd]

Regarding the CSS custom property, we might do as in another place, using an unassigned custom property and our Sass variables as a fallback:

.breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-separator, #{$breadcrumb-separator)};
}