Page MenuHomePhabricator

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


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

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 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!)