EN

English 简体中文 soon 日本語 soon

Workflow

Ship a Design Handoff That Developers Trust

Verify contrast, lock down a palette, and export clean specs so nothing is lost between design and code.

Estimated time: ~45 min Tools involved: 4 Designers handing off to developers

1

Audit every text/background pair against WCAG AA so accessibility issues never reach code review.

Check small text at 4.5:1 and large text at 3:1 — flag anything below before handoff.

Built-in tools

Color Contrast Checker

design

Check foreground and background colors against WCAG 2.1 AA and AAA, in any format you paste.

Run here No login
2

Lock the palette into a single source of truth with swatches developers can copy.

Include the hex values, not screenshots. Developers will ask for them anyway.

External tools

Coolors

Fast palette generation and contrast checking
3

Compress any full-bleed images in the spec so the handoff package stays light.

Export assets as WebP/AVIF for the web and keep original PNGs for print.

External tools

Squoosh

Open-source browser compressor with pixel-level control over image quality and size.
4

Add a short README-style note inside the markdown spec that names the tokens.

Name color tokens semantically (--surface-1) rather than by value (#0B0F1A).

Built-in tools

Markdown ↔ HTML

text

Convert Markdown to HTML and HTML back to Markdown with a live preview.

Run here No login

All tools in this workflow

Tool	Role	Built-in / External
Color Contrast Checker	Audit every text/background pair against WCAG AA so accessibility issues never reach code review.	Built-in
Coolors	Lock the palette into a single source of truth with swatches developers can copy.	External
Squoosh	Compress any full-bleed images in the spec so the handoff package stays light.	External
Markdown ↔ HTML	Add a short README-style note inside the markdown spec that names the tokens.	Built-in