We scored 11 fintech sites against a 26-check design contract — tokens, motion, accessibility, typography, performance. The contract is real: it's the Designesy design system, verifiable via an open-source MCP server you can run yourself.
Every single one failed.
The best score was a D.
The leaderboard
| Rank | Site | Score | Grade | Tokens | Headline failure |
|---|---|---|---|---|---|
| 1 | Stripe | 72.9 | D | 719 | No tabular-nums on a payments site |
| 2 | Square | 66.7 | D | 3 | 16× transition:all
|
| 3 | Wise | 66.0 | D | 224 | Button contrast 1.85:1 (fails AA) |
| 4 | Plaid | 60.0 | D | 179 | Button contrast 3.87:1 (fails AA) |
| 5 | Adyen | 58.0 | F | 122 | Button contrast 0.00:1, 322× transition:all
|
| 6 | Affirm | 56.0 | F | 191 | Press scale 0.66 (floor is 0.95) |
| 7 | Klarna | 56.0 | F | 556 | Button contrast 1.00:1 |
| 8 | Checkout.com | 50.0 | F | 488 | No :focus-visible, no reduced-motion |
| 9 | Brex | 45.7 | F | 563 |
--ink token luminance mismatch |
| 10 | Ramp | 41.3 | F | 0 | No focus-visible, no reduced-motion, 0 tokens |
| 11 | Robinhood | 39.1 | F | 2 | No focus-visible, no reduced-motion, 2 tokens |
3 sites blocked: Mercury (HTTP 429), Coinbase (HTTP 403), Revolut (HTTP 403) — the scoring engine fetches their CSS and they rate-limited or blocked the request. If your site blocks automated fetches, it also blocks accessibility audits. Think about that.
Finding 1: Not one fintech site uses tabular-nums
font-variant-numeric: tabular-nums is a CSS property that makes every digit the same width. It's been supported since 2013. It prevents this:
$ 1,000.00
$ 1,500.00 ← the "5" is narrower than the "0", the number shifts left
When your bank balance updates, the digits shouldn't dance.
11 out of 11 fintech sites fail this check. Stripe, the highest scorer at 72.9/D, fails it. Robinhood, the lowest at 39.1/F, fails it. Not a single site that exists to display financial numbers uses the one CSS property that makes financial numbers readable.
This isn't a nitpick. If you're building a fintech dashboard and your balance reflows when the last digit changes, users can't track their money at a glance. The number jitters. The layout shifts. The eye loses its place. This is the most basic typography rule for financial UI, and the entire industry ignores it.
/* The fix — one line */
.balance, .amount, .price {
font-variant-numeric: tabular-nums;
}
Finding 2: The "Buy Now" button you can't read
Klarna's entire product is "buy now, pay later." You see a price, you click a button, you split it into 4 payments. The button is the product.
Klarna's primary button contrast ratio: 1.00:1.
That's the same color on the same color. Not 4.5:1 (WCAG AA). Not 3:1 (WCAG AA Large). Not even 2:1. One-to-one. The button text is invisible to anyone who isn't viewing it on a perfectly calibrated monitor in a dark room — and even then, it's barely there.
But Klarna isn't alone:
| Site | Button contrast | WCAG AA (4.5:1) | What it means |
|---|---|---|---|
| Stripe | ✅ passes | ✅ | Good |
| Square | ✅ passes | ✅ | Good |
| Checkout.com | 4.54:1 | ✅ (barely) | Passes by 0.04 |
| Affirm | 18.14:1 | ✅ | Excellent |
| Plaid | 3.87:1 | ❌ | Fails AA |
| Wise | 1.85:1 | ❌ | Fails AA badly |
| Adyen | 0.00:1 | ❌ | Same color |
| Klarna | 1.00:1 | ❌ | Same color |
The irony: the sites targeting developers (Stripe, Square, Checkout.com) pass contrast. The sites targeting consumers (Klarna, Wise, Adyen) fail. The people who can fix contrast have accessible buttons. The people who can't are told to click a button they can't read.
Finding 3: Affirm's buttons run away from your finger
The contract checks press scale — how much an interactive element shrinks when pressed. The floor is 0.95 (elements shrink by no more than 5%). This prevents the "running away" feeling where a button shrinks so much on tap that it feels like it's dodging your finger.
Affirm's press scale: 0.66.
Buttons shrink to 66% of their size when tapped. That's a 34% reduction. On a site where the primary action is clicking "Pay in 4," the pay button shrinks to two-thirds of its size when you press it. It doesn't feel like a press confirmation — it feels like the button is flinching.
The fix is trivial:
.button:active {
transform: scale(0.96); /* not 0.66 */
}
Finding 4: Adyen has 322 transition:all declarations
transition: all is a performance anti-pattern. It transitions every property change — including width, height, padding, margin — causing layout recalculations on every frame. On a payments site processing global transactions, this means jank when the UI updates.
Adyen: 322 instances. Square: 16. Brex: 24. Affirm: 17.
The fix:
/* Don't do this */
.card { transition: all 200ms; }
/* Do this — transition only what you animate */
.card { transition: transform 200ms ease-out, opacity 200ms ease-out; }
322 transition:all declarations means 322 places where a layout property change triggers a transition. On a site where milliseconds matter (payment processing, fraud detection UI), the CSS is fighting against the product.
Finding 5: Ramp and Robinhood — the 40-point floor
In our previous batch ("We scored 16 more sites. The dev tools are worse than the design awards."), the lowest score was tokens.studio at 39.1/F — a site about design tokens that has zero design tokens.
In this batch, two fintech sites score in the same range:
-
Ramp: 41.3/F — 0 design tokens, no
:focus-visiblerules, noprefers-reduced-motionquery -
Robinhood: 39.1/F — 2 design tokens, no
:focus-visiblerules, noprefers-reduced-motionquery
Robinhood democratized stock trading. Ramp manages corporate spend. Both are worth billions. Both have the same design system maturity as a site about design tokens that has no design tokens.
The pattern: company valuation does not correlate with design system maturity. What correlates is whether someone on the team cares about design contracts. Stripe (72.9) has 719 design tokens. Robinhood (39.1) has 2. The difference isn't budget — it's priority.
Finding 6: The accessibility double-fail
Four sites fail both :focus-visible AND prefers-reduced-motion:
| Site | :focus-visible |
prefers-reduced-motion |
|---|---|---|
| Checkout.com | ❌ | ❌ |
| Brex | ✅ | ❌ |
| Ramp | ❌ | ❌ |
| Robinhood | ❌ | ❌ |
No :focus-visible means keyboard users can't see which element is focused. No prefers-reduced-motion means users with vestibular disorders (motion sensitivity) can't disable animations. These are both WCAG-adjacent requirements, and both are CSS — no JavaScript, no backend, no infrastructure. Two media queries and a pseudo-class.
Ramp and Robinhood fail both. On sites where users make financial decisions.
The pattern across both batches
We've now scored 27 sites in two batches (16 dev-tool sites + 11 fintech sites). The pattern is clear:
- No industry has a passing site. The highest score across both batches is 72.9/D (Stripe). No site has scored a C or above.
-
tabular-numsis universally ignored. Every site that displays numbers — dev tool version counts, fintech balances — fails this check. - Contrast failures cluster on consumer-facing sites. Developer-tool sites pass button contrast. Consumer fintech sites fail it.
- The 40-point floor is industry-agnostic. tokens.studio (39.1), Robinhood (39.1), Ramp (41.3) — different products, same neglect.
- Design tokens don't guarantee a good score, but zero tokens guarantees a bad one. Stripe (719 tokens, 72.9) vs Robinhood (2 tokens, 39.1).
Run the scoring yourself
The scoring engine is an open-source MCP server. Install it and score any URL:
# Install
pip install designesy-mcp
# Or use uv (no install)
uvx designesy-mcp
# Score a site
# In your MCP client (Claude, Cursor, VS Code):
# use the designesy_score tool with url: "https://stripe.com"
The contract has 26 checks across 8 categories: tokens, responsive, interaction, motion, accessibility, typography, cadence, performance. Every check is deterministic — no subjective scoring, no LLM judging. The CSS either has tabular-nums or it doesn't.
Full source: github.com/LE-VAI/designesy-org
The bottom line
If your site handles people's money and your button contrast is 1.00:1, you're not building a fintech product — you're building a barrier. If your balance display doesn't use tabular-nums, you're not designing for readability — you're designing for jitter.
The fintech industry talks about trust. Trust isn't a brand color and a clean logo. Trust is a button you can read, a number that doesn't shift, a focus ring that shows keyboard users where they are, and a motion query that respects the 35% of users who request reduced motion.
None of the 11 sites we scored have all four.
Scores were collected on August 7, 2026 using the Designesy design contract v0.4.0. The scoring engine is open-source and deterministic — run it yourself and verify every number in this article.
Tags: #webdev #design #a11y #fintech
Top comments (0)