#design#a11y#color

Color contrast rules for SaaS

Two ratios to remember, three places where designers always cheat. Fixing them takes an hour and lifts engagement.

Color contrast rules for SaaS

Two contrast ratios to remember:

Color contrast rules for SaaS
Typical contrast ratios in a SaaS UI — disabled and muted often fail.
  • 4.5:1 for body text
  • 3:1 for large text and UI components

Three places where designers cheat:

  • Placeholder text on inputs — usually 2.8:1, fails everywhere. Fix: darker placeholder.
  • "Muted" secondary text — looks aesthetic, fails for older users. Fix: don't go below 4.5:1.
  • Disabled buttons — designed to look "off", end up unreadable. Fix: change opacity, not contrast.

Tools: Stark plugin in Figma, web.dev/measure runs contrast checks, browser DevTools have built-in checkers.

Fixing all three across a typical SaaS app: 1-2 hours. Engagement bump from users with low vision: 5-15% (depends on demographic).

Other articles
(01) Color palettes for dark UI — what works in 2026 Pure black is wrong. Warm dark plus accent is right. A palette template that works for SaaS, e-commerce and editorial. → (02) Dark UI contrast — getting accessibility right Pretty dark UIs often fail WCAG. Two ratios to remember and one tool that catches mistakes before users complain. → (03) Liquid Glass on the web — is it worth copying the iOS 26 look Apple shipped Liquid Glass in iOS 26 and now everyone is porting it to web. Half of the attempts are old glassmorphism in a new wrapper. Here is what actually works. → (04) Animation principles for web UI Disney's 12 principles applied to web UI. Two of them matter most: anticipation and follow-through. → (05) AI-generated images for ads — Midjourney, Sora, Flux A year of generative ads. Patterns that work and the visible AI smell that ruins campaigns. →