Design tools

Color & Contrast Tool

Convert HEX, RGB, and HSL colors, check WCAG contrast ratios, and generate accessible shade ramps locally.

Live preview

Readable interface text

This preview uses the selected foreground and background colors so you can judge legibility beyond the numeric ratio.

Primary actionSecondary label

Contrast

17.06:1
Normal text AA: Pass
Large text AA: Pass
Normal text AAA: Pass
#1a1a2e / rgb(26, 26, 46)
hsl(240 28% 14%)
#ffffff / hsl(0 0% 100%)

Foreground shade ramp

Features

Color Conversion

Convert between HEX, RGB, and HSL values from one input.

WCAG Contrast

Check contrast ratio and AA/AAA pass states for text colors.

Shade Ramp

Generate lighter and darker variants for UI tokens and palettes.

Live Preview

Preview foreground/background combinations at common text sizes.

Copy Values

Copy color values and ramps for CSS variables or design docs.

Browser Local

All color math runs locally with no external service.

Frequently Asked Questions

The checker uses the WCAG relative luminance contrast formula.

Yes. Copy HEX, RGB, HSL, or shade ramp values into CSS custom properties.

No. It checks color contrast, which is one important part of accessible UI design.

A growing collection of fast, privacy-first developer utilities. All tools run in your browser — your data never leaves your device.

Tools

JSON ParserJSON Schema ValidatorJSON ConverterJSON to TypeScriptOpenAPI ViewerCode FormatterSQL FormattercURL ConverterTimestamp ConverterCron ParserURL EncoderQR Code ToolIP & CIDR CalculatorGzip & Deflate ToolJWT DecoderJWT Verify & JWK ToolHash GeneratorPassword & TOTPBase64 EncoderUUID GeneratorImage MetadataImage CompressionTiny Image CompressorImage Toolkit ProScreen RecorderRegex TesterText DiffMarkdown & Mermaid PreviewColor & Contrast Tool

Legal

Privacy PolicyTerms of Service

© 2026 ZPTools. All Rights Reserved.