2

In the Buttons page of Google's Material Design online handbook, touch/click ripples are only mentioned in the "Buttons in motion" section, as an example video with no explanatory text. Here, the ripples shown are dark. In their Polymer elements demo for paper buttons, both light- and dark-background elements are demoed, and the dark button's ripple's ink is light. At what point should the ripple's ink be light (semitransparent white) versus dark (semitransparent black)?

5
+50

In all the simple button examples (including other examples in the animation section), the ripple effect compliments the colour of the text or icon - which should follow readability (use a colour contrast checker if in doubt).

In general, this is common sense: if you have a 'dark' button requiring light text, adding light ink will be visible and consistent; if you have a 'light' button requiring dark text, adding dark ink will be visible and consistent.

Making a light button even lighter might not be possible and might make it blend too much with the background. Making a dark colour darker might be barely noticeable, or might push a colour to an ugly place that clashes with your palette.


That said, I can think of three likely exceptions:

  • If the purpose of the animation is a "meaningful transition" to a state with a different colour, it makes sense for the transition to be based on the colour of the state it's transitioning to. The guidelines don't explicitly state this, but it follows the theme of animations having a clear purpose and direction, and it fits the example of the album selection at the top of that page (flashing yellow when selecting an album that has yellow as the designated primary colour)
  • If your button is a bright, rich, vibrant colour that stands out from the background, but needs dark text for readability reasons because it's a hue with high luminosity (for example rich yellows, maybe some lightish greens), I'd favour white rather than dark - darkening these might give you an ugly colour that clashes with the otherwise vibrant palette (e.g. rich yellows becoming off-brown)
  • If your button is a pale pastel colour, and your colour palette includes a brighter matching colour, use that higher-saturation brighter version of that colour to match your palette (rather than plonking on black, creating a greyish shade that doesn't exist in your palette).
  • 1
    so, essentially, "use your best judgement"? – Supuhstar Nov 24 '14 at 17:42
  • 2
    That's pretty much the rule for anything in design :-) (unless there's a written guideline saying otherwise)... That said, I'd say it's more like "Use the text colour, unless you have a specific reason to do otherwise". – user56reinstatemonica8 Nov 24 '14 at 17:45
  • interesting... makes me wonder how many questions on this site could be answered with "use your best judgement". – Supuhstar Nov 24 '14 at 20:06
  • 1
    It's more like "take this and this into account in your judgement". Like how on coding sites, questions could all be answered with "use code that works", but a better answer is "code like this this can be made to work" – user56reinstatemonica8 Nov 24 '14 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.