Making WordPress.org

Opened 6 weeks ago

Closed 7 days ago

#8245 closed defect (bug) (fixed)

Low contrast in form field descriptions

Reported by: fedesca90's profile fedesca90 Owned by:
Milestone: Priority: normal
Component: Profiles Keywords: needs-patch needs-design has-screenshots
Cc:

Description

Hi,
As a logged-in user, I’ve encountered an accessibility issue on the user profile page.
https://profiles.wordpress.org/{your_name}/profile/edit/group/1/
On the profile tab, the description fields are styled using color: #888;.
Against a white background, the contrast ratio is only 3.54.

To reproduce the bug, you can:
1) Go to https://login.wordpress.org/
2) Log in
3) Click on “Edit profile” at the top right of the screen
3) Look for descriptions below input fields

I found the CSS rule here
https://profiles.wordpress.org/wp-content/themes/profiles.wordpress.org/style.css on line 1594

form.standard-form p.description {
  font-size: 11px;
  color: #888;
  margin: 5px 0;
}

The color to achieve a minimum contrast ratio of 4.5 is

#767676

The ticket needs design feedback to select the best color from the theme palette.

Attachments (1)

WordPressUserProfile_contrastDescriptionIssue.png (26.0 KB) - added by fedesca90 6 weeks ago.
Low contrast description field

Download all attachments as: .zip

Change History (2)

@fedesca90
6 weeks ago

Low contrast description field

#1 @yani.iliev
7 days ago

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

Thanks for the precise report, including the exact rule and ratio! Fixed in r24844. Instead of #767676 (which lands exactly at the 4.5:1 minimum), the descriptions now use the theme palette's ink-3 (#5d6166, 6.2:1 on white), the same color the rest of the small metadata text in the redesign uses, so the fix stays consistent with the palette as requested. Also bumped the size from 11px to 12px to match the other meta text.
Props fedesca90

Note: See TracTickets for help on using tickets.