Page MenuHomePhabricator

Challenging `text-shadow` on disabled elements
Open, MediumPublic

Description

There's a discrepancy on disabled elements in the implementation in MobileFrontend (via mediawiki.UI) and OOjs UI and design (M101).
Before the color palette overhaul, disabled elements in M101 have featured text-shadow to leverage the contrast of primary buttons (especially white color on grey background), which didn't and still doesn't comply to WCAG 2.0 level AA.
The design template featured text-shadow: 0 1px rgba( 0, 0, 0, 0.1 ) though, which gives the text a slight 3D touch. In our conversations which predated the new color palette, we've concluded on using 3D just for box-shadows and very carefully.

Please provide feedback what of the following options is the best to progress:

  1. No shadow,
  2. 3D resembling text-shadow
  3. Blurred to all sides text-shadow for more contrast.

Find them exemplified at https://codepen.io/Volker_E/pen/ALdbQE

Event Timeline

Volker_E created this task.Oct 13 2016, 2:41 AM
Volker_E lowered the priority of this task from High to Medium.Oct 13 2016, 3:12 AM
Volker_E updated the task description. (Show Details)
Volker_E removed a subscriber: Danny_B.
Volker_E renamed this task from Using `text-shadow` on disabled elements to Challenging `text-shadow` on disabled elements.Oct 13 2016, 3:18 AM

As additional information, text-shadow: 0 1px rgba( 0, 0, 0, 0.1 ) is also still featured on primary buttons in mediawiki.UI (for example on the login screen).

Volker_E updated the task description. (Show Details)Oct 14 2016, 7:12 PM
Nirzar added a comment.EditedOct 14 2016, 9:18 PM

no text shadow. i think we can remove the primary button text-shadow too.. it was leftovers from the 3d button era.

I want to add one small note, we could have a significant higher contrast with relatively little visual impact with the alternate options (I just added another one to the CodePen).

RHo added a comment.Oct 18 2016, 3:17 PM

I think no shadow is fine, particularly since color contrast is not a requirement for disabled elements, per WCAG (my emphasis below):

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

I agree on keeping it simple and avoid the shadows (and introducing potential inconsistency with the shadow-less icons that can appear next to them). We can reconsider if we find issues while testing with users.

We have a clear majority on the disabled buttons case.

I have to open this up one more time as text-shadows are currently also used on disabled input elements like the “TextInputWidget (disabled)”‎ in OOjs UI demos, which are a different beast. Their color contrast is not level AA compliant (3.82:1) and gains from use of white text-shadow.


Your takes on that?

RHo added a comment.Oct 20 2016, 12:09 PM

For same reasons as previously, I think we can simplify to no text-shadows here as well.

For same reasons as previously, I think we can simplify to no text-shadows here as well.

Aklapper removed Volker_E as the assignee of this task.Jun 19 2020, 4:22 PM
Aklapper removed a subscriber: Nirzar.

This task has been assigned to the same task owner for more than two years. Resetting task assignee due to inactivity, to decrease task cookie-licking and to get a slightly more realistic overview of plans. Please feel free to assign this task to yourself again if you still realistically work or plan to work on this task - it would be welcome!

For tips how to manage individual work in Phabricator (noisy notifications, lists of task, etc.), see https://phabricator.wikimedia.org/T228575#6237124 for available options.
(For the records, two emails were sent to assignee addresses before resetting assignees. See T228575 for more info and for potential feedback. Thanks!)