Neumorphism Looked Great In Mockups, Terrible In Reality

I remember the exact moment I fell for neumorphism. It was late 2020, and someone on Dribbble posted a music player concept that looked like it was carved out of a single block of clay. The buttons looked pressable. The sliders looked touchable. I stared at it for way too long and immediately opened Figma to try it myself. And you know what? The mockup looked incredible. Soft shadows, subtle highlights, that satisfying "pushed in" effect on active states. It felt fresh at a time when everything else was flat or material. I spent a weekend converting my entire personal project portfolio into neumorphic design. Every button, every card, every toggle switch — all softly extruded from the background. I was so proud of it. Then I showed it to actual users. The first comment was, "Is this broken?" The second was, "I can't tell what's clickable." By the fifth person, I realized I had a real problem on my hands. What looked gorgeous in a perfectly lit Figma artboard turned into a confusing mess on an actual screen, in actual lighting conditions, with actual content. Let me break down why neumorphism fails more often than it works. The core problem is contrast — or lack of it. Neumorphic designs rely on extremely subtle tonal differences between the element and its background. On a bright monitor, those differences are barely visible. On a phone outdoors, they disappear completely. The shadows that look so elegant on a Retina display become invisible noise on a standard laptop panel. Accessibility is where it really falls apart. The WCAG contrast guidelines require a certain ratio between text and its background, but neumorphic designs often violate this because the whole aesthetic depends on low-contrast, monochromatic palettes. I tested my neumorphic portfolio with a contrast checker and failed on nearly every interactive element. Buttons that looked "pressable" to me at a glance had contrast ratios of 2:1 or less. That's not just bad design — it's exclusionary. Then there's the practicality issue. Neumorphism only works on solid, flat backgrounds. The moment you add a gradient, an image, a pattern, or a dark mode toggle, the entire illusion shatters. You can't have neumorphic cards sitting on top of a hero image. You can't drop a neumorphic button into a modal that has a semi-transparent overlay. It only works in a very specific, very controlled environment — which is almost never the real world. I'm not saying neumorphism is all bad. The principle it's based on — skeuomorphic affordance — is actually valuable. The idea that an element should look like it can be pressed is good UX. The problem is that neumorphism takes this to an extreme where the visual metaphor overpowers functionality. What I learned is that a hint of neumorphism, used sparingly, can work. A subtly extruded card background on a dashboard. A toggle switch that feels tactile without losing visibility. But full-commitment neumorphism? It belongs in mockups and inspiration boards, not production apps. My neumorphic portfolio lasted about three weeks before I redesigned it with a proper design system built on clear boundaries, accessible contrast, and interaction states that didn't rely on lighting conditions. It was less exciting to look at. But users could actually use it. And in the end, that's what design is supposed to be about.