Opened 7 years ago

Closed 7 years ago

#3054 closed defect (bug) (fixed)

Profiles: Use a consistent contrast for badges background color

Reported by: sergeybiryukov's profile SergeyBiryukov Owned by: coreymckrill's profile 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 7 years ago.

Download all attachments as: .zip

Change History (8)

7 years ago

#1 @SergeyBiryukov
7 years ago

  • Keywords ui-feedback added

#2 @hlashbrooke
7 years ago

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

#3 @coreymckrill
7 years 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
7 years 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 7 years ago by SergeyBiryukov (previous) (diff)

#5 @melchoyce
7 years ago

Looks good to me 👍

Original codepen with Sass here, by the way: (if it's helpful at all)

#6 @SergeyBiryukov
7 years 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
7 years 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.