Profiles: Use a consistent contrast for badges background color

[SergeyBiryukov]

Most of the badges use a 3.5:1 — 3.7:1 contrast for background color.

Some of the recently added badges (WP-CLI Team, Hosting Team, Community Team) use a much lower 1.6:1 contrast, which looks especially weird on the Community Team badge added in #3036.

The styles in question are:

.badge-community {
	background: rgba(17, 121, 157, 0.75);
	box-shadow: 0 0 0 4px rgb(17, 121, 157);
}
.badge-wp-cli {
	background: rgba(66, 66, 66, 0.75);
	box-shadow: 0 0 0 4px rgb(66, 66, 66);
}
.badge-hosting {
	background: rgba(83, 88, 166, 0.75);
	box-shadow: 0 0 0 4px rgb(83, 88, 166);
}

Replacing 0.75 with 0.25 seems much more in line with the other badges, see the screenshot.

[hlashbrooke]

+1 to this - The newer badges don't work with such a dark background shade.

[coreymckrill]

Sounds good to me. @melchoyce any thoughts before I make this change? Is 0.25 the right number?

[SergeyBiryukov]

Note: Using 0.25 on .badge-community results in #c3dde6 background color. This would be consistent with .badge-accessibility, which has the same colors (as seen on the screenshot).

The only thing I'm not sure about is why these newer bages have background color specified in the rgba() format, while the older badges have a hexadecimal value. Perhaps older badges should be converted to rgba() as well?

[melchoyce]

Looks good to me 👍

Original codepen with Sass here, by the way: ​https://codepen.io/melchoyce/pen/Jgywi (if it's helpful at all)

[SergeyBiryukov]

0.25 is the equivalent of tint( $color, 75% ) used in the codepen, so appears to be correct:

@mixin badge-color-banded( $color ) {
	background: tint( $color, 75% );
	box-shadow: 0 0 0 4px $color;
	&:before { color: $color; }
}

[coreymckrill]

Fixed with [dotorg13346]

I also went ahead and converted all the colors to rgb / rgba, as suggested by @SergeyBiryukov. This will make it easier to maintain consistency when copying rules for new badges in the future.