Free product design tools: contrast, color and type
Checks a product designer needs between Figma and handoff: whether colors pass WCAG, how to build an accessible palette and a type scale with CSS clamp(), and whether tooltips and tours give users enough time to read. Palettes and type scales export as CSS, Tailwind or tokens.
Tools in this collection
- Color contrast checker
Does this text and background color pair pass WCAG AA or AAA?
- Accessible palette generator
How do I get an accessible color palette with contrast checked for every shade?
- Type scale & fluid type generator
Which font sizes make a consistent, fluid type scale?
- Tooltip & tour reading time
Do users have enough time to read a tooltip or tour step before it moves on?
- Tooltip copy checker
Is this tooltip short, clear and actionable enough?
- SUS calculator
What is the System Usability Scale score, and is the usability good?
- NASA-TLX calculator
How heavy did this task feel, and which kind of demand made it heavy?
When you need them
Accessible visual design
Check text and background contrast against WCAG AA and AAA, generate a palette where every shade has a known contrast, and build a modular type scale with fluid sizes.
Onboarding UI and usability
Estimate how long a tooltip or tour step takes to read, check its copy, and measure usability with a SUS survey.
FAQ
What contrast ratio does WCAG require?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components; AAA requires 7:1 and 4.5:1. The contrast checker shows all levels and suggests the nearest passing color.
How do I generate an accessible color palette?
Pick a brand color and the palette generator builds 50–900 shades in OKLCH, measures WCAG contrast for every step and lists the pairs that pass AA.
What is a fluid type scale?
A set of font sizes built from a ratio (for example 1.25) where each size grows smoothly between a minimum and maximum viewport width using CSS clamp(). The generator outputs the CSS.
How long should a tooltip stay on screen?
Long enough to read: about 230 words per minute for average adult reading, plus time to find the element. The reading time calculator suggests a duration for each tooltip and tour step.
How do designers measure usability?
The System Usability Scale is a 10-question survey that gives a 0–100 score; 68 is average. The SUS calculator scores many responses at once and shows a confidence interval, percentile, grade and adjective.
Can I use the results in my design system?
Yes. Palettes export as CSS, Tailwind or JSON, and type scales as CSS, Tailwind or tokens.
Related collections
UX writing
Tooltip copy, readability, reading time, email subjects and search snippets.
Tools: 5Open →UX research
Survey sample size and scoring for NPS, CSAT, CES, SUS and Kano surveys.
Tools: 8Open →Product management
Prioritize the roadmap, measure feature adoption and time to value, score user feedback.
Tools: 13Open →