Drunk CSS: An Empathy Nudge, Not Accessibility

The author shares a “Drunk” CSS theme that destabilizes a site—altered fonts, skewed/rotated elements, blur and saturation, and bouncing links—to simulate frustration. It’s not a true model of drunkenness, but a deliberate exercise in inaccessibility meant to build empathy. The real solution is to test with disabled users, pay them, and integrate their feedback.

Key Points

• A “Drunk” mode uses CSS to intentionally degrade usability—altered fonts, slanted text, skew/rotation, blur/saturation, and bouncing links.
• Lowercase vowels are targeted via @font-face unicode-range while other text falls back to a cursive font; elements are transformed with nth-child selectors.
• The effect is not a realistic simulation of inebriation but a deliberate demonstration of inaccessibility and frustration.
• It serves as an empathy exercise to feel friction that many users experience daily, but it is not a replacement for real accessibility work.
• Proper practice is to test with and pay people with disabilities, then integrate their feedback into design and development.

Sentiment

The Hacker News sentiment is largely mixed. While there's a general appreciation for the underlying principle of designing for simplicity and the article's intent to highlight accessibility issues, there's significant disagreement regarding the 'Drunk CSS' theme's effectiveness and accuracy in simulating drunkenness. Many commenters find the simulation unrealistic or criticize practical flaws in its implementation, leading to a somewhat critical reception of the specific CSS execution despite a positive view of the broader accessibility message.

In Agreement

• The underlying principle of designing for extreme simplicity, often encapsulated by the 'user is drunk' rule, is valuable for many applications, especially those used occasionally or under stress (like POS systems).
• The 'Drunk CSS' theme, by creating a difficult and annoying reading experience, effectively demonstrates the frustration faced by users encountering accessibility barriers, aligning with the article's goal of provoking empathy.
• The theme switcher and the ability to compare the 'nude' version of a site are appreciated as a modern take on concepts like CSS Zen Garden, highlighting the power of CSS for visual transformation and UI experimentation.

Opposed

• The 'Drunk CSS' theme does not accurately simulate the experience of being drunk, as actual drunkenness primarily affects cognitive function rather than just visual perception, making visual tricks insufficient.
• Some argue that not all websites or tools need to be designed for the 'lowest common denominator,' with specialized applications (like retail POS software for trained users) potentially prioritizing efficiency over universal simplicity.
• The original concept of paying individuals to get drunk for user testing raises ethical concerns, regardless of consent.
• The implementation of the Drunk CSS itself can introduce new usability issues, such as text being pushed off-screen on mobile or the activation button being difficult to find, inadvertently creating barriers rather than purely demonstrating them.
• The effectiveness of certain CSS choices, like using a 'cursive font,' is questioned for its inconsistent rendering across different operating systems and its practical impact on readability.