: When should a Material Design ripple be dark, and when should it be light? In the Buttons page of Google's Material Design online handbook, touch/click ripples are only mentioned in the "Buttons

@LarsenBagley460

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

Vote Up Vote Down