We’re changing Spotify’s most important buttons. Here’s why.
If there’s one button you use every time you open Spotify, it’s the play button. No matter if you see it on your phone, on your laptop, or on your fridge, tapping or clicking it will always start playing something. There’s a good reason why we haven’t changed how it looks over the years — it’s the universally recognized symbol for audio playback.
However, we’re always looking for ways to improve the user experience of our products, and that includes keeping a close eye on their accessibility.
Based on our research on accessibility, we’re making changes to the buttons you see across the Spotify experience — in terms of color, text formatting, and size. In this article, you’ll read all about our changes and why we made them.
Ever since we launched in 2006, the color green has been an integral part of our brand. You can find it in obvious places, like our logo, but we also use it throughout the user experience, most notably for a lot of our buttons.
Back in 2015, we launched a refreshed brand that introduced our distinctive Spotify green. Deliberately created to be vibrant, we quickly got started on implementing it everywhere — before we realized it wouldn’t work in our UI. That’s why we developed UI green, a slightly darker version that improved contrast and accessibility when using white text or icons on top.
However, we recently decided to further improve the contrast of our green buttons. If contrast isn’t high enough, it could be difficult for low-vision, non-sighted, and visually impaired users to use our app to the fullest extent. Lower contrast could also situationally impact anyone, depending on environmental conditions like lighting and reflections.
As it turns out, making our green play well with a white overlay wasn’t easy. We explored different solutions, like baselining the white text or logo with a high-contrast green, or getting rid of our beloved green altogether(!). Both weren’t cutting it.
Next, we explored our options. We could work with the original Spotify green, the special UI green, or create a new solution. In order to reach the recommended contrast ratio of 4.5:1, we needed to darken these colors a lot. The result turned out to be something that’s decidedly less Spotify, and more… Christmas tree.
While we weren’t happy with our UI green, this was even further removed from our brand color. We needed to come up with something better — and it turned out that one of the simplest solutions was also the best.
When we tried using black for our foreground color, we measured a contrast ratio of 10.9:1 with Spotify green — an enormous improvement for the legibility of any text or icons.
This meant that we would be able to use our original Spotify green instead of UI green, which makes our most vibrant color pop even more. On top of the gray background color we use in our UI, Spotify green has a 9.7:1 contrast ratio — better than the 7.2:1 that UI green would get us.
While updating their color is significant, it’s not the only one change we’re making to buttons today — we’re also taking the opportunity to improve the way our buttons work with localization.
Our old buttons used a combination of generous padding and an UPPER CASE type style that could cause issues with localization to certain languages. Because Spotify supports more than 60 languages from across the world, this meant we would sometimes run out of space in languages with longer string lengths.