Making WordPress.org

#3054 closed defect (fixed)

Profiles: Use a consistent contrast for badges background color

Reported by: SergeyBiryukov Owned by: coreymckrill
Milestone: Priority: normal
Component: Profiles Keywords: has-screenshots ui-feedback


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.

Attachments (1)

3054.png (46.0 KB) - added by SergeyBiryukov 20 months ago.

Download all attachments as: .zip

Change History (8)

20 months ago

#1 @SergeyBiryukov
20 months ago

  • Keywords ui-feedback added

#2 @hlashbrooke
20 months ago

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

#3 @coreymckrill
20 months ago

  • Owner set to coreymckrill
  • Status changed from new to accepted

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

#4 @SergeyBiryukov
20 months ago

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?

Last edited 20 months ago by SergeyBiryukov (previous) (diff)

#5 @melchoyce
20 months ago

Looks good to me 👍

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

#6 @SergeyBiryukov
20 months ago

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; }

#7 @coreymckrill
20 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.