Why WCAG Matters for Fintech
Financial applications have unique accessibility requirements. Your users aren't browsing for entertainment. They're managing money, investments, and payment flows. Some users have visual impairments and rely on screen readers. Others have motor impairments and navigate keyboard-only. A color-blind user needs to distinguish transaction status without relying on red/green color alone.
WCAG 2.1 AA is the accessibility standard. Not because it's perfect, but because it's the legal baseline in most jurisdictions. In fintech, it's non-negotiable. An inaccessible payment form isn't a design choice—it's a liability.
The good news: WCAG compliance doesn't require perfection. It requires discipline. You document what you're doing, you test it, you fix what breaks. WCAG becomes your checklist, not your ceiling.
The 4 Most Failed Criteria
WCAG 2.1 AA has 50+ individual criteria. Most design systems fail on four:
1. Color Contrast (1.4.3) — 86% failure rate in audits
Text needs 4.5:1 contrast ratio against its background. That means #6B7280 (medium gray) text on white doesn't pass. You need darker gray. This applies to buttons, labels, placeholders, everything with text.
2. Focus Visible (2.4.7) — 72% failure rate
Interactive elements need a visible focus indicator when navigated by keyboard. A blue outline, a border change, something obvious. If your button doesn't show focus state, keyboard users can't see what they're about to click.
3. Non-Text Content (1.1.1) — 64% failure rate
Icons need alt text. Status badges need descriptive labels. A red X icon without alt text means screen reader users don't know what failed. They just know something happened.
4. Name, Role, Value (4.1.2) — 58% failure rate
Custom components need proper ARIA labels. A button that looks like a button but doesn't have role="button" confuses screen readers. A modal that traps focus but doesn't have aria-modal="true" breaks navigation.
Color Contrast: The 4.5:1 Rule in Practice
The rule is simple: Text color and background color must have a contrast ratio of at least 4.5:1.
How to check: Use Figma's built-in contrast checker or any online tool (WebAIM contrast checker). Enter your text color and background color. If the ratio is 4.5 or higher, you pass.
Practical examples for a fintech color palette:
- Pass: #1F2937 (dark gray) text on #FFFFFF (white) = 11.5:1 ratio
- Pass: #FFFFFF (white) text on #0F172A (dark blue) = 18.1:1 ratio
- Fail: #9CA3AF (light gray) text on #FFFFFF (white) = 3.4:1 ratio
- Fail: #6366F1 (indigo) text on #F3F4F6 (off-white) = 3.2:1 ratio
For component tokens, apply this rule:
Test every color combination in your design system against white and dark backgrounds. Document which combinations pass. Use those in your components.
Focus States Every Component Needs
Keyboard navigation is how screen reader users move through your interface. Every interactive element needs a focus state—visible, obvious, not easily confused with hover.
Focus state requirements:
- Visible: Use outline, border, or color change. Not a 1px outline—make it obvious.
- Consistent: All interactive elements have the same focus style (usually a colored outline).
- Sufficient contrast: Focus indicator must also pass 4.5:1 contrast against background.
- Not covered: Focus indicator shouldn't be hidden behind the component.
In Figma, create a focus state frame for each component showing:
- Button with 2–3px colored outline (usually accent color or blue)
- Input field with visible outline and perhaps different border color
- Link with underline or color change
- Checkbox with outline around the box itself
- Radio button with outline around the circle
This focus state frame becomes your specification. Developers build to match it. Your component is now keyboard accessible.
Non-Text Element Contrast
Icons, badges, and visual indicators also need 3:1 contrast (lower than text, but still important). A green badge on a white background needs sufficient color contrast even if no text is present.
Examples:
- Status icons: Red X, green checkmark, yellow warning—each needs 3:1 contrast against background
- Transaction badges: Pending (gray), Complete (green), Failed (red)—colors need to be distinguishable apart from the word inside
- Form indicators: Required field asterisks (usually red) need 3:1 contrast
- Graph data: Different colored lines in a chart need 3:1 contrast between adjacent colors
For fintech transactions specifically, don't rely on color alone. Pair color with text or icons. "Failed" in red + an X icon. "Pending" in gray + a clock icon. Color-blind users get the meaning regardless.
The Audit Workflow
Monthly accessibility audit workflow:
Step 1: Automated testing (weekly)
Run axe DevTools in browser on your deployed site. It catches 50–60% of WCAG issues automatically. Fix those first—easy wins.
Step 2: Manual contrast checking (weekly)
Pick a color combination from your palette. Test it in WebAIM contrast checker. Document the result. Build a contrast matrix for all your text colors and backgrounds.
Step 3: Keyboard navigation (monthly)
Unplug your mouse. Navigate your whole product using only Tab, Shift+Tab, Enter, Space, Escape. Record issues. Fix the critical ones (buttons not reachable, focus not visible).
Step 4: Screen reader testing (quarterly)
Use NVDA (free, Windows) or VoiceOver (built-in, Mac). Test a critical flow: login, create transaction, confirm payment. Listen for: - Are form labels announced? - Are button purposes clear? - Is navigation structure logical?
Document findings. Prioritize by impact (login broken = critical, button color not announced = low).
Getting Started This Week
Component-level checklist for WCAG AA:
Run this checklist on your Button, Input, and Modal components. Fix failures. Repeat monthly. WCAG compliance becomes habitual, not heroic.
Start this week. Pick one component. Make it accessible. Show your team. Repeat.