WordPress.org

Making WordPress.org

Opened 4 months ago

Closed 4 months ago

#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
Cc:

Description

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 4 months ago.

Download all attachments as: .zip

Change History (8)

@SergeyBiryukov
4 months ago

#1 @SergeyBiryukov
4 months ago

  • Keywords ui-feedback added

#2 @hlashbrooke
4 months ago

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

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

#5 @melchoyce
4 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
4 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
4 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.