WCAG Brand & Design system Audit
An independent CoinGecko audit proposing documented text-pairing rules for Gecko Green
Design systems
Accesibility
Role
Product Designer
Timeline
8 weeks
team
Me
platform
Web
The problem
While using a CoinGecko coin page, I noticed that some buttons paired Gecko Green with white text. I checked the contrast and found that the pairing measured 2.11:1, below the stated WCAG AA threshold for normal text.
I then checked where the color scale appeared in the product and guidelines.
I checked the CoinGecko coin info page, buttons, chips and found these failures. This is an independent audit and proposal, not an approved or implemented CoinGecko change
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 and saw 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
Drilling deeper
Inspecting the live product revealed that CoinGecko's Moon Design System does have a stepped scale for Gecko Green. It just isn't documented publicly. Two steps are in active use:
#E8FCC9. A light tint used on chips and UI components
#35AF00. A darker shade used on chips, buttons to create depth
The scale itself isn't the problem because all three steps work well with dark text. The issue is that white was paired with the primary gecko green for the primary and secondary buttons.
White doesn't have enough contrast against any of them.
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
Moon design system context
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.
My proposal
Document approved text pairings beside each Gecko Green token in Moon. For the primary green, the comparison supports black text over white text. Extend the rule to the darker and lighter values only after checking their exact ratios and use cases. Then identify the components and pages that need updating, starting with the highest-priority surfaces in the audited scope.
What this taught me
This audit showed me why contrast checks need to be part of token and component documentation. A brand color can work visually while a text pairing on top of it fails. The proposed rule needs exact measurements and a defined scope before it can guide a system-wide change.