WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#35661 closed defect (bug) (fixed)

Color contrast and other improvements for the WP badge

Reported by: afercia Owned by: melchoyce
Milestone: 4.5 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots color-contrast has-patch commit
Focuses: ui, accessibility Cc:

Description

See related #31713.

The WP badge on the About/Credits/Freedoms screens has a version number with a low contrast:

https://cldup.com/C--LgvVAJg.png

Also, the "W" mark should be updated to the most recent one and maybe the placement of the badge could be improved a bit.

Attachments (3)

About-screen.png (112.0 KB) - added by liljimmi 3 years ago.
Version number in white.
35661-update-badge.diff (4.7 KB) - added by hugobaeta 3 years ago.
Patch to fix text color, adjust proportions of the badge, and replace svg (uploading updated fallback png separately)
w-logo-white.png (9.1 KB) - added by hugobaeta 3 years ago.
updated png fallback file at retina size (double the size that it's displayed)

Download all attachments as: .zip

Change History (16)

#1 @afercia
3 years ago

  • Owner set to hugobaeta
  • Status changed from new to assigned

Assigning to @hugobaeta since he's far more familiar with WordPress branding than me :)

This ticket was mentioned in Slack in #design by afercia. View the logs.


3 years ago

@liljimmi
3 years ago

Version number in white.

#3 @liljimmi
3 years ago

Hello. I attached a screenshot of the version number in white. Let me know what you all think. I also took the current logo from https://wordpress.org/about/logos/ and it looks identical to the one on the welcome screen.

Please let me know if I'm missing something.

Thank you.

#4 @afercia
3 years ago

Hello @liljimmi! the version number in white is definitely more readable. About the logo: cc @hugobaeta :)

#5 @liljimmi
3 years ago

Would you like me to create a patch for the contrast, or wait for feedback on the logo and make a patch for the whole thing?

#6 @afercia
3 years ago

@liljimmi not sure about the logo, @hugobaeta mentioned he wanted to update it with the latest version, see: https://wordpress.slack.com/archives/design/p1454081141000448

@hugobaeta
3 years ago

Patch to fix text color, adjust proportions of the badge, and replace svg (uploading updated fallback png separately)

@hugobaeta
3 years ago

updated png fallback file at retina size (double the size that it's displayed)

#7 @hugobaeta
3 years ago

Yes, I've been wanting to update the logo there with the revised new version (you can find it on the new Design Handbook: https://make.wordpress.org/design/handbook/foundations/identity/).

Uploaded a patch to change the text color to white, and used the opportunity to tweak the proportions of the patch slightly. Also updated the image files (SVG and PNG fallback) with the new version of the logo mark. Here's a preview:

https://cldup.com/_uPCzGTTvi.png

#8 @liljimmi
3 years ago

Looks great!

#9 @afercia
3 years ago

  • Keywords has-patch commit added; needs-patch removed

For posterity: before and after on Chrome, Windows:

https://cldup.com/BDyKfDuDb5.png

I'd say one of the design team representative should commit :)

#10 @melchoyce
3 years ago

  • Owner changed from hugobaeta to melchoyce

I'll take this one.

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


3 years ago

#12 @melchoyce
3 years ago

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

In 36910:

About: Improve color contrast of WP Badge text, and update the logo to use the latest version.

Fixes #35661.
Props @hugobaeta.

#13 @pento
3 years ago

In 36929:

About: Run w-logo-white.png through imagemin.

See #35661.

Note: See TracTickets for help on using tickets.