Web design and accessibility tools
Create colors and CSS, prepare icons and check selected accessibility points. A contrast result or an automated HTML check covers specific rules only; it is not an audit of a whole site.
Create colors and CSS styles
Color palette generator
Generate harmonious palettes, lock colours you like, and export CSS or JSON.
CSS gradient generator
Design linear, radial and conic gradients with multiple stops and copy the CSS.
CSS shadow generator
Layer box and text shadows with live preview and copy the CSS.
Flexbox and CSS Grid playground
Experiment with flex and grid properties on live boxes and copy the CSS.
Icons, SVG and typography
SVG editor and optimizer
Edit SVG code with live preview, optimize it with SVGO, and export PNG.
Favicon generator
Create favicon.ico, PNG icons, an Apple touch icon and a web manifest from one image.
Font pairing previewer
Preview heading and body font pairs from Google Fonts on realistic layouts.
Uses a public service
Review layout and selected accessibility checks
Color contrast checker
Check text and background contrast against WCAG AA and AAA, and get passing suggestions.
HTML accessibility checker
Run automated accessibility rules on your HTML and get fixes for each issue.
Responsive layout previewer
Preview your HTML at phone, tablet and desktop widths side by side.
Guides
- Colour contrast and WCAG: what AA and AAA mean, with examples: How the WCAG contrast ratio is calculated, the AA and AAA thresholds, real colour pairs that pass and fail, and how to fix low contrast.
- Favicons in 2026: which sizes and files you actually need: The few favicon files a modern website needs, the HTML to reference them, designing an icon that works at 16 pixels, and what to drop.