Accessibility

Contrast Ratios (WCAG AA)

PreviewCombinationRatioAA (Normal)AA (Large)AAA
Aa
 White on Dark (#0A0A0A) 19.5:1 ✔ Pass✔ Pass✔ Pass
Aa
 White on Black (#000) 21:1 ✔ Pass✔ Pass✔ Pass
Aa
 Gold on Dark (#0A0A0A) 5.2:1 ✔ Pass✔ Pass✘ Fail
Aa
 Gold on White 4.0:1 ✘ Fail✔ Pass✘ Fail
Aa
 Dark Gold on White 4.8:1 ✔ Pass✔ Pass✘ Fail
Aa
 Heading on White 18.4:1 ✔ Pass✔ Pass✔ Pass
Aa
 Body Gray on White 5.0:1 ✔ Pass✔ Pass✘ Fail
Aa
 Muted Gray on White 3.3:1 ✘ Fail✔ Pass✘ Fail
Aa
 Success Green on White 4.5:1 ✔ Pass✔ Pass✘ Fail
Aa
 Error Red on White 4.6:1 ✔ Pass✔ Pass✘ Fail

Touch Targets

Save
Small button (32px) with 44px touch target
✕
Icon button (24px) with 44px touch zone
Full-width list item touch area
List items use full width for tap target
All interactive elements must have a minimum 44 × 44px touch target (WCAG 2.5.5)

Color-blind Safe Design

✘ Color alone
+2.34% -1.23% → +2.34% -1.23% Deuteranopia sim
✔ Color + arrow
+2.34% ↑ -1.23% ↓ → +2.34% ↑ -1.23% ↓ Still readable
✔ Best Color + arrow + label
Gain +2.34% ↑ Loss -1.23% ↓ → Gain +2.34% ↑ Loss -1.23% ↓ Fully accessible

Focus States

Invest Now
Button: 2px gold outline, 2px offset
Input: gold border + 3px glow ring
View Details
Link: gold underline + outline
All focusable elements must have a visible focus indicator with ≥ 3:1 contrast against the background.