Comment 3 for bug 1984007

Hi, Tiffany! I'll walk through my thought process on this...

The two WCAG rules in play here are 1.4.1, color can't be the only thing used to convey meaning, and 1.4.3, minimum color contrast. I am also imposing a rule of consistency: if one warning has a background color, both should. This is more of a UI best practice, although something like it might end up in the next version of WCAG, which will formalize a lot of usability guidelines related to cognitive ease.

As Andrea noted, currently the red text color is the only thing distinguishing the dangerous funds. Making the text bold and adding icons solves that issue.

Color contrast is a thornier problem. Yellow text doesn't work at all unless it's darkened to the point where it's a burnt orange/brown color that becomes hard to distinguish from red. Stripe's design team did a deep dive on Bootstrap colors: https://stripe.com/blog/accessible-color-systems and determined that the best solution was to use very dark hues for text, paired with the lightest shade as a background color. They demonstrated with badges (at the end of the article, just above the "Conclusion" heading), as does the book Refactoring UI, excerpted here: https://twitter.com/steveschoger/status/1045371124274483200

To meet contrast requirements and still make the difference between warning and stop funds readily apparent, the warning funds need a pale yellow background. For consistency's sake, that means the stop funds need a pink background as well.

The .less-intense-alert CSS style, currently the last one in the main styles.css file, includes a comment that white-on-red alerts are very intense and hard to read when stacked--as funds in this dropdown are very likely to be. This style also uses a pink background.

The color scheme I've used is consistent with my PR on badge contrast, based on the same sources: https://bugs.launchpad.net/evergreen/+bug/1999282 I've been sticking with Bootstrap 5 color tints, but I'm open to fiddling with the exact colors as long as the final result passes WebAIM's contrast checker.