Indonesia Singapore ไทย Pilipinas Việt Nam Malaysia မြန်မာ ລາວ
← Back to Blog

CSS, Empathy, and the Design Stack Nobody Talks About

Automate contrast compliance with CSS contrast-color(), then protect the empathy layer that no algorithm replaces.

Editorial illustration of a designer at the intersection of code and human emotion
Illustrated by Mikael Venne

From self-correcting color systems in CSS to the quiet erosion of empathy in UX — what the design stack really needs in 2026.

70% of websites still fail basic WCAG contrast checks — in 2026, after a decade of accessibility tooling, linters, and design system investment. The problem was never awareness. It was architecture.

Those two facts sit next to each other uncomfortably, much like the current state of design itself: we keep automating the measurable parts while quietly letting the unmeasurable ones slip. Understanding both failures — and how they connect — is more useful than solving either in isolation.

The Color Problem Was Always a Systems Problem

Smashing Magazine’s Durgesh Pawar makes a sharp observation: the reason contrast failures persist isn’t that designers don’t care about accessibility, it’s that the tooling lived outside the rendering pipeline. Linters flag issues. Plugins warn you. And then a developer overrides a token in a component variant at 11pm, and the audit score collapses two sprints later.

contrast-color() changes the logic. Rather than checking compliance after the fact, the CSS function calculates the highest-contrast foreground color relative to a given background at render time — natively, in the browser. The color system becomes self-correcting. Drop a brand’s primary on a dark-mode card, and the text color resolves automatically to meet contrast requirements without a single manual decision.

For marketing teams running multi-market campaigns across Southeast Asia — where a single creative asset might render across Shopee’s app, a LINE broadcast, and a mobile web landing page — this matters operationally, not just ethically. Each surface has its own rendering environment. Programmatic theming that resolves contrast algorithmically reduces QA overhead and eliminates a category of brand-safety risk that most teams don’t even track.

The implementation consideration worth flagging: contrast-color() is still gaining browser support as of mid-2026, so a progressive enhancement approach is required. Define fallback values explicitly, and test rendering in WebView environments — which power a significant portion of in-app browsers on Android across the region.

What Automation Actually Frees You To Do

Here’s where I want to push back on a lazy conclusion: automating contrast compliance doesn’t reduce the design team’s cognitive load so they can do more of the same. It should free capacity for the work that doesn’t automate — specifically, understanding users before touching a tool.

UX Collective’s Marcelo Ordenes frames this as a question about empathy under pressure. His argument is uncomfortable in the right way: AI-assisted design workflows are accelerating the output layer while compressing the research and observation layer. Teams are shipping faster and understanding less. The gap doesn’t show up in your design system audit. It shows up in conversion data six months later when a feature that looked right in Figma creates friction for users whose mental models your team never mapped.

This isn’t anti-AI sentiment. It’s a data quality argument. Every predictive model I’ve built degrades when the input signals don’t reflect how people actually behave — only how they behave in the contexts we thought to measure. Design has the same problem. If your empathy layer is thin, your design decisions are training on incomplete data.


The Business Case for the Unmeasurable

Marketing directors in Southeast Asia are increasingly being asked to justify design investment in terms of CRO and revenue attribution. That’s a reasonable ask, and it’s answerable — but only partially through quantitative means.

There are measurable design outcomes: Tokopedia’s mobile-first checkout redesign reduced drop-off at payment confirmation by restructuring the form hierarchy for thumb-zone interaction on mid-range Android devices. That’s a concrete, trackable result. Grab’s multi-language UI system — which dynamically adjusts layout density for Bahasa Indonesia vs. Thai vs. Vietnamese — addresses a real rendering problem that directly affects task completion rates.

But neither of those solutions would have been identified without someone spending time observing how actual users navigated those flows before any wireframe existed. The measurement came after the empathy. Teams that skip the second step and try to justify only the first are optimizing a function they don’t fully understand.

The stakeholder buy-in strategy here is honest sequencing: show the conversion impact of past empathy-informed decisions, then protect the research budget that makes future decisions possible. Design system automation like contrast-color() is a credibility argument — it demonstrates rigor and frees resources. Use that credibility to fund the slower, messier work of user understanding.

Where Design Systems Meet Market Reality

For brands scaling across Southeast Asia’s platform ecosystem, the practical implication is this: your design system needs two distinct layers of intelligence. The first is algorithmic — contrast resolution, responsive layout logic, dark/light mode switching, language-aware typographic scaling. This layer should be largely self-managing by 2026. If it isn’t, you’re spending design capacity on decisions a browser can make.

The second layer is human and irreducible. It’s the insight that users in Tier 2 Philippine cities have different trust signals for checkout than users in Metro Manila. It’s understanding why a color palette that performs in Singapore reads differently in Jakarta. No CSS function resolves that. No A/B test surfaces it unless you already knew to look.

The design teams that will compound their advantage over the next three years are those who automate the first layer aggressively and reinvest the capacity into the second. The question worth sitting with: which layer is your team currently under-investing in — and is that a resource problem, or a belief problem?


grzzly works with marketing and growth teams across Southeast Asia to build design and data systems that reinforce each other — from design system architecture to audience research frameworks that inform creative decisions upstream. If you’re trying to figure out where algorithmic tooling ends and human judgment needs to begin, that’s exactly the kind of conversation we find useful. Let’s talk

Mellow Grizzly

Written by

Mellow Grizzly

Translating raw data into activated audience segments, predictive models, and decisioning logic. Comfortable at the intersection of the data warehouse and the campaign manager.

Enjoyed this?
Let's talk.

Start a conversation