WordPress.org

Make WordPress Core

Opened 3 weeks ago

Closed 3 weeks ago

#48396 closed defect (bug) (fixed)

Disabled primary button not readable outside the default admin color scheme

Reported by: david.binda Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.3
Component: Administration Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility Cc:
PR Number:

Description

The "light gray" (I'm bad at colours) used for text of disabled primary button outside the default color scheme (which is using lighter shade of blue) is unreadable. I've noticed that on widgets page in wp-admin, but it can be reproduced elsewhere (eg.: in customizer).

I'm attaching screenshots demonstrating the issue in individual admin color schemes shipped with 5.3.

Also, the light blue on darker blue background in the default color scheme does not seem to make a sufficient contrast from the accessibility point of view (per https://webaim.org/resources/contrastchecker/?fcolor=66C6E4&bcolor=008EC2 ). But I'm not an expert in this field.

Attachments (14)

default.png (6.4 KB) - added by david.binda 3 weeks ago.
light.png (6.4 KB) - added by david.binda 3 weeks ago.
blue.png (6.2 KB) - added by david.binda 3 weeks ago.
coffee.png (5.8 KB) - added by david.binda 3 weeks ago.
ectoplasm.png (6.2 KB) - added by david.binda 3 weeks ago.
midnight.png (6.3 KB) - added by david.binda 3 weeks ago.
ocean.png (5.9 KB) - added by david.binda 3 weeks ago.
sunrise.png (6.3 KB) - added by david.binda 3 weeks ago.
48396.diff (616 bytes) - added by afercia 3 weeks ago.
48396-for-testing.diff (1.1 KB) - added by afercia 3 weeks ago.
53-ectoplasm.png (8.6 KB) - added by audrasjb 3 weeks ago.
Ectoplasm
53-midnight.png (8.6 KB) - added by audrasjb 3 weeks ago.
Midnight
53-ocean.png (8.4 KB) - added by audrasjb 3 weeks ago.
Ocean
53-sunrise.png (8.6 KB) - added by audrasjb 3 weeks ago.
Sunrise

Download all attachments as: .zip

Change History (22)

@david.binda
3 weeks ago

@david.binda
3 weeks ago

@david.binda
3 weeks ago

@david.binda
3 weeks ago

@david.binda
3 weeks ago

@david.binda
3 weeks ago

@david.binda
3 weeks ago

@david.binda
3 weeks ago

#1 @audrasjb
3 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.3.1
  • Owner set to audrasjb
  • Status changed from new to assigned

Hello and thank you for this ticket,

We already spotted some issues with alternate color scheme and fixed them for the most important parts of the UI.

However, please note that alternate color schemes aren't accessibility ready, even before 5.3.

By the way, disabled states could clearly be improved for each alternate color scheme. It wasn't looking good before 5.3 CSS changes, and it's a good thing that 5.3 helped to raise that kind of issues :)

Milestoning this ticket to 5.3.1 so it could be hopefully addressed as a regression (even it wasn't super accessible in the past).

Cheers,
Jb

#2 @david.binda
3 weeks ago

Thanks for the very kind response @audrasjb :)

However, please note that alternate color schemes aren't accessibility ready, even before 5.3.

Got it, did not know that.

However, even the default color scheme seems to have issues with contrast ratio for buttons in disabled state. Per https://webaim.org/resources/contrastchecker/?fcolor=66C6E4&bcolor=008EC2 . Just wanted to make sure it has not been missed (I perhaps should have split the report into separate tickets).

#3 @afercia
3 weeks ago

To clarify: text that is part of disabled controls has no contrast requirement. See https://www.w3.org/TR/WCAG21/#contrast-minimum

@afercia
3 weeks ago

#4 @afercia
3 weeks ago

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

This changed in in [46241] see #34904.

Though the disabled buttons contrast for alternate schemes isn't great in WordPress 5.2 and previous versions as well, I wouldn't be opposed to revert the change to the background color, preserving the new "flat" style of the buttons.

48396.diff does that and 48396-for-testing.diff can be used for testing in the "Profile" page, where it adds a couple buttons right underneath the alternate color schemes selection.

Worth noting this was reported also by @johnjamesjacoby and is in the to-do list of adjustments to implement for the next minor release. However, since it's a two lines change and basically reverts to the previous styling, I'd like to propose to commit this now in 5.3. /Cc @audrasjb

@audrasjb
3 weeks ago

Ectoplasm

@audrasjb
3 weeks ago

Midnight

@audrasjb
3 weeks ago

Ocean

@audrasjb
3 weeks ago

Sunrise

#5 @audrasjb
3 weeks ago

@afercia I tested the patch on my side, and I'm pretty confident it's worth doing it in 5.3. I will ask for decision (and hopefully a second committer review) during today's devchat.

The scope of the change is pretty limited so I personally think this 2-lines CSS change should land in 5.3.

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


3 weeks ago

#7 @azaozz
3 weeks ago

  • Keywords commit added
  • Milestone changed from 5.3.1 to 5.3

This looks more like a "regression fix", lets add it to 5.3.

+1 for 48396.diff.

#8 @afercia
3 weeks ago

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

In 46575:

Accessibility: Restore the primary buttons original background color for alternate color schemes after [46241].

Props david.binda, audrasjb, azaozz.
See #34904.
Fixes #48396.

Note: See TracTickets for help on using tickets.