Free Design, Accessibility & Web Tools

Check interface decisions, generate design tokens, convert images, and prepare web releases without creating an account

Scroll to Explore

All seven tools are available now. File-based tools process uploaded images in your browser. Calculators and previews produce working inputs for review; the notes below explain where a browser, search engine, or real-user measurement can still differ.

Accessibility & Design Systems

Color Contrast Checker

Accessibility

Calculate the contrast ratio between a foreground and background color, then check WCAG 2.2 AA and AAA thresholds for normal and large text.

  • •WCAG 2.2 AA and AAA checks
  • •Normal and large-text thresholds
  • •Shareable color-pair URL
Check Contrast

Typography Scale & Font Hierarchy Generator

Typography

Set a base size and ratio, assign body and heading roles, preview the hierarchy on desktop and mobile, and copy rem or CSS clamp() variables.

  • •Desktop and mobile role previews
  • •Fixed rem or fluid clamp() CSS
  • •Shareable configuration
Generate Scale

Spacing Calculator

Design System

Build a linear or modular spacing scale, preview the token set, and move the same values into design-system code.

  • •Linear and modular scale modes
  • •CSS, Tailwind, SCSS, and JSON exports
  • •Shareable configuration
Calculate Spacing

Color Palette Generator

Color

Generate a palette from a harmony rule, choose colors manually, or extract dominant colors from an image, then preview and export the result.

  • •Random, manual, and image-based modes
  • •Light and dark interface previews
  • •CSS, Tailwind, and JSON exports
Create Palette

Web Delivery & Search

Image Format Converter

Performance

Convert and resize images in the browser. AVIF export appears only when the current browser can encode it; WebP, JPEG, and PNG remain available.

  • •Single or batch conversion for up to 15 files
  • •Browser-local image processing
  • •Individual or ZIP downloads
Convert Images

Performance Budget Calculator

Performance

Set resource-size and request budgets, compare estimated device and network scenarios, and export a configuration for build checks.

  • •Resource-type and request limits
  • •Device and connection estimates
  • •JSON and Lighthouse CI exports
Set Budget

SEO Meta Previewer

SEO

Draft title, description, canonical, and social metadata while previewing common search and sharing layouts.

  • •Google title and snippet preview
  • •Facebook, X, and LinkedIn cards
  • •Live field-length feedback
Preview Meta

Use the Output as a Starting Point

Contrast results follow the WCAG 2.2 contrast thresholds. Performance figures are estimates; compare the budget with field and lab data, as recommended in web.dev's performance-budget guidance. Image size and fidelity depend on the source, format, quality setting, and browser encoder; MDN documents the trade-offs between common web image formats. Google documents how it generates title links and snippets, which can differ from a valid metadata draft.

Need a Tool That Fits Your Workflow?

Share the repetitive job, the people doing it, and what a useful result looks like. We can work out whether a small internal tool is worth building.

Describe the Workflow