Ensure decent contrast in color-related utilities

Created by: ffoodd

Fixes #34016 (closed)

Drafting this because it's valuable for Bootstrap's overall accessibility, just a I did with :focus-visible polyfill. Would regret not trying :)

Inspired by Boosted, I still think this is highly valuable by getting decent contrasts for free using our utilities — and no more requiring eg. .text-dark alongside .bg-info.

Things to consider:

• Might be considered a BC, even if nothing will break: colors and background will change and while it's certainly for the best, it'll obviously get back to us as issues and discussions (RTL is recent, isn't it?).
• Always ignoring !important to ease overrides, in order to still use .text-* and .bg-* together.
• Could lead to side-effect when eg. a component part uses a color and a .bg-*: since utilities are added last in our build, .bg-* according color would override the component part's one if its selector is a class (or equivalent specificity).

I didn't met such cases while working with Boosted for years so I'm pretty confident, however Bootstrap is a bit more popular and used :D

To do

If this PR gets positive feedback, before merging we'll need to:

• drop a few .text-* or .bg-* throughout our docs (and examples)
• updates utilities documentation
• mention this in the migration guide, somehow: it'll ease the migration from badge badge-info from v4 to badge bg-info instead of badge bg-info text-dark—and we'll probably find other cases.