デザインツール

カラー・コントラストツール

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

主な機能

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.

よくある質問

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.

高速でプライバシー重視の開発者ユーティリティ集です。すべてのツールはブラウザー内で動作し、データはデバイス外に送信されません。

ツール

JSON パーサーJSON Schema バリデーターJSON コンバーターJSON から TypeScriptOpenAPI ビューアーコードフォーマッターSQL フォーマッターcURL コンバータータイムスタンプ変換Cron パーサーURL エンコーダーQR コードツールIP・CIDR 計算Gzip・Deflate ツールJWT デコーダーJWT 検証・JWK ツールハッシュ生成パスワードと TOTPBase64 エンコーダーUUID 生成画像メタデータ画像圧縮Tiny 画像圧縮画像ツールキット Pro画面録画正規表現テスターテキスト DiffMarkdown・Mermaid プレビューカラー・コントラストツール

法務

プライバシーポリシー利用規約

© 2026 ZPTools. All Rights Reserved.