Info badge colour

[calvinkarpenko]

This is the first time I've reported something so I'm not sure if I'm doing it in the right place or not.

I note that the new info badge doesn't provide sufficient colour contrast per AA guidelines in the V5 Alpha 2.

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

The contrast is 1.96 apparently when used with white text as seen in the docs. I use it with black text myself, which does provide the contrast required.
So the docs either need changing or the colour needs changing :)

[XhmikosR]

Thanks for the issue, but please don't grab random PR URLs 😛

The v5 docs are on https://v5.getbootstrap.com/ or the main branch on https://twbs-bootstrap.netlify.app

[calvinkarpenko]

Noted for future! :) I have checked on the main branch just to make sure and the issue exists on there too :)

[Mx-Glitter]

@calvinkarpenko For your information, this is already documented here: https://v5.getbootstrap.com/docs/5.0/getting-started/accessibility/#color-contrast

There are probably related issues you should find and read first to understand the rationale behind this choice before proposing to change it 😊

[calvinkarpenko]

@Mx-Glitter - Thanks for the reply - I'm aware of that and was just mentioning it because it wasn't AA compliant in the docs for Alpha 2 - and figured it may have been slightly overlooked. I'm under the impression that the aim is for the docs to be AA compliant as well :)

[XhmikosR]

We are working towards this, and v5 has already many improvements. I have a WIP PR we plan to land at some point, #29315 .

[calvinkarpenko]

We are working towards this, and v5 has already many improvements. I have a WIP PR we plan to land at some point, #29315 .

I'm well aware and have been following with interest :) I just didn't know how else to notify you of this and was under the impression it may have been missed, that's all :)

[XhmikosR]

@ffoodd don't we have another issue/PR we track this stuff already?

[ffoodd]

We do (#30548) and we somehow solved this with #31276 — however badges don't have color variants, they're only relying on our color utilites.

The info badge example should simply use .text-dark alongside .bg-info to comply, just like warning and light badges. PR incoming :)