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 significant 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.
It's not green, it's Spotify green
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.
Searching for a solution
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.
Back to black (and green)
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.
Improving localization
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.
By switching the buttons over to sentence case and applying less padding, the new style takes up 20-30% less space. This enables us to display more text in the same amount of space, which means we can show the full string more often. The button also feels less shouty, more human, and is better optimized for readability at larger type sizes.
Accessibility by design
All in all, we’re making text easier to read and buttons easier to spot. It also puts our digital experience more in line with our brand, which makes for a more consistent user experience.
We care about creating an inclusive experience, which is why user research with people with disabilities has been the driving force behind our design initiatives, like our new buttons and the recently announced improvements to the Desktop app. Also, with the internal launch of Encore, our family of design systems, we’re able to more efficiently streamline our efforts to create an app that works for everyone.
Designing for inclusivity is important when you’re part of the daily life of over 356 million people. Even a relatively small change can significantly improve the lives of many, making it easier to listen to the songs and podcasts they love.
We can’t wait to roll out our new buttons across all Spotify platforms very soon. Also, we’re excited to share more of our learnings around color theming and accessibility, coming to you on this blog in the coming months. Stay tuned!
Join us!
Are you passionate about creating accessible experiences on a global scale? We’re always looking for great people to join the band — and with our new Work From Anywhere policy, you get to pick where you work from. Head over to our jobs page to see if there’s something you like.
