The brand color that failed WCAG
Project Overview
CoinGecko's primary brand color is on millions of screens. It fails WCAG on every single one of them. An unsolicited design systems audit. One finding, one root cause, one rule that fixes it across the entire product.
Industries
cryptoo
Services
Accessibiliy
Design System
Systems Thinking
Year
2026
The Problem
I was using the CoinGecko coin info page, a generally high traffic page when something felt visually off about these green buttons so I ran a contrast check.
Why this happened
The stepped scale was built for visual depth and layering, #35AF00 sits behind the primary green on buttons to create depth, #E8FCC9 creates a softer chip background. Both decisions are visually sound.
The gap is that white text was paired with green as a background and as a text without a contrast check. The colors were never the problem, the text color choice on top of them was and without a documented rule in Moon defining which text color belongs on each step, white gets used by default because it feels right against a saturated green.
But it doesn't pass, black does comfortably, on every scale step
I was using the CoinGecko coin info page, a generally high traffic page on when something felt visually off about these green buttons so I ran a contrast check.
White text on #4BCC00 (Gecko Green) returned a contrast ratio of 2.0:1
WCAG AA requires a minimum of 4.5:1 for normal text. WCAG AAA requires 7:1. The buttons were failing both thresholds by a significant margin.
I kept looking. The same color was appearing in the opposite direction. Gecko Green as text on white backgrounds, failing in the same way. Same color, both directions, multiple surfaces.
That sent me to the brand guidelines and product itself to understand the full picture
Moon design system context
Crypto wallets ask users to do something deeply uncomfortable, hand over control of their money to software they don't fully understand. Most wallet UI responds to this by looking like every other fintech product: flat, clinical, interchangeable. That sameness doesn't build trust. It just avoids the problem. SlimeWallet was designed to answer a different question: what if the interface itself communicated that this product was built with intention?
CoinGecko's Moon Design System already applies strong contrast thinking to semantic colors. Success Green, Warning Yellow, Danger Red and Info Blue all have tints and shades generated specifically to create contrast in badges and alerts.
The documentation is explicit: those stepped values exist because component statuses require contrast to communicate meaning clearly.
That same thinking wasn't extended to Gecko Green. The primary brand color has no documented text pairing rules. Every designer who reaches for it has to guess what text color to use on top of it and the default guess is wrong.
The proposal
The fix doesn't require changing any color in the scale. It requires documenting one rule clearly in Moon: Black text on all Gecko Green backgrounds. White text on none of them.
Specifically:
#4BCC00: Black text only (10.52:1, passes AA and AAA)
#35AF00: Black text only (passes AA and AAA)
#E8FCC9: Dark text, already used correctly on chips
Document that rule the same way badge contrast is documented. Then sweep existing implementations to update the white text instances. Highest-traffic pages first, the rest absorbed into normal sprint cycles.
Conclusion
The most interesting accessibility failures aren't careless ones. They're the ones where a system did something thoughtful, built a stepped scale, documented semantic colors carefully, controlled tints centrally and a gap appeared in a place the same logic wasn't extended to.
The Gecko Green scale is well constructed. It just never had its text pairing rules written down. Finding that required looking past the surface of a single button and understanding how the system was built, what it already did well, and where one specific rule was missing.
CoinGecko built something good. A stepped color scale, documented semantic contrast rules, a design system with real thought behind it, the gap was one undocumented rule in a system that otherwise got it right.
That's the kind of thing you only find by understanding how a system thinks, If your product has a system that's mostly right, I'd like to help close the gap.
One short conversation is all I'm asking for