Increase contrast of admonitions to WCAG AAA, inline code to AA

[vsalvino]

Fixes #11 , also see discussion on #119

Color contrast of admonitions, version notices meets WCAG AAA standard. Inline code contrast has also been increased slightly to meet WCAG AA standard (is now 5.3:1), plus also meets 3:1 contrast ratio with surrounding text.

Overall the new colors are not as "shiny" but hopefully still match the look-and-feel. More shininess can be had if we are OK with lowering to WCAG AA standard.

Kept the colors mostly the same:

• Info was changed to a more indigo-ish color to match the theme;
• Success was changed to a more wagtail-ish teal.
• Danger was darkened.
• Default admonition was black, changed this to info, to better match theme.
• Warning was already good, no changes.
• Made admonition titles bold.
• Inline code was previously a bright red, adjusted slightly to increase contrast while preserving color contrast with color of surrounding text (blackish gray).

Admonitions:

Versions:

Inline code:

[Scotchester]

Most of these changes look good to me, with one exception: I'm not sure if the contrast between the color of inline code and surrounding dark gray text is sufficient. I think the typical guidance for color change to indicate something like that (see also: link colors) is 3:1, but this new combo is only 2.29:1. I recognize that means we'll probably have to settle for not meeting the AAA standard for the inline code, but I think that's an acceptable tradeoff for more contrast with the surrounding text. How about #c9312c? That's 3.03:1 with the #212121 standard text color, and 5.3:1 on white.

[vsalvino]

Good point. I'm guess it might be somewhat impossible to meet both. AA contrast it is still considered "good", so that would probably be acceptable.

In that case the original color for inline code is probably sufficient #ee0028 and can stay unchanged:. Not sure if #11 is still relevant then. https://webaim.org/resources/contrastchecker/?fcolor=ee0028&bcolor=212121

[Scotchester]

I think either way is fine, but I would think it's better to prioritize the contrast on white vs. the contrast with surrounding text, so for that reason (and the existence of #11 implying that others think it should have been darker anyway, even if it barely passed at 4.5:1), I'd go with the darker red I suggested in my comment.

[vsalvino]

Ok, took your color and flipped blue and green values slightly (to skew it more bluish than greenish, to match the indigo vibe) to #D02040. Look decent to me, thanks for finding the happy medium between 5:1 and 3:1 !

(updated screenshots in description)

[Scotchester]

LGTM!