Why Your Disabled Button Disappears on Video Backgrounds (And Why Material Design Isn’t Wrong)
Material Design’s disabled button tokens work beautifully on surfaces — but what happens when your UI lives on top of videos, images, and immersive experiences?
A Small Problem That Made Me Think
I was designing a booking screen for an airline app.
The screen looked beautiful. It had a full-screen destination video in the background and a Continue button at the bottom.
Everything looked perfect.
Then I disabled the button.
It almost disappeared.
At first, I thought I had made a mistake.
Maybe I used the wrong color.
Maybe the opacity was too low.
So I checked the design system.
Everything was correct.
The button was following the design guidelines perfectly.
So why couldn’t I see it?
The Button Wasn’t Wrong
The video was the problem.
On a normal screen, a disabled button sits on a plain background.
The contrast stays the same, so the button is still easy to recognize.
But a video changes every second.
One moment the background is dark.
The next moment it’s bright.
Then a white airplane flies across the screen.
Then clouds.
Then the sky.
The button never changes, but the background does.
That makes the button difficult to see.
My First Solution
Like many designers, I tried the easiest fix.
I made the disabled button darker.
It worked.
The button became easier to see on the video.
But there was a new problem.
Now the disabled button looked too strong on every other screen.
It no longer looked disabled.
I had solved one problem and created another.
Then I Asked a Different Question
Instead of asking,
“How should a disabled button look?”
Get Vedant’s stories in your inbox
Join Medium for free to get updates from this writer.
I asked,
“Where is this button being used?”
That simple question changed everything.
The problem wasn’t the button.
The problem was the background behind it.
I Started Looking at Other Apps
After that, I paid attention to the apps I use every day.
Streaming apps like YouTube and Netflix don’t place buttons directly on videos.
They add a dark gradient or overlay behind the controls.
Photo apps do something similar.
Even map apps make sure important controls stay separate from the map.
None of them try to make the buttons brighter.
Instead, they make the background calmer.
That’s a much smarter solution.
What I Learned
A design system shouldn’t only think about component states like:
- Enabled
- Disabled
- Pressed
- Focused
It should also think about where those components appear.
For example:
- On a normal screen
- On an image
- On a video
- On a map
The same button may need a different visual treatment depending on its environment.
My Takeaway
This experience taught me something important.
Good design isn’t only about following guidelines.
It’s about understanding the situation in which those guidelines are used.
Sometimes we don’t need to redesign the button.
We simply need to redesign the space around it.
Final Thoughts
That disappearing button was a small issue.
But it changed the way I think about design systems.
Instead of designing only for components, I’ll now design for context as well.
Because a great design system doesn’t just answer “What does this component look like?”
It also answers “Where will people use it?”
And sometimes, that’s the difference between a good user experience and a great one.
