カラーコンバーター
HEX、RGB、HSL、HSVの間で任意の色を変換。ピッカーで選ぶか、いずれかのフィールドに直接入力 — 他のフィールドもライブ更新。アクセシブルな配色のためのWCAGコントラストチェッカー付き。
デザインシステムの色の移植、アクセシブルな前景/背景ペアの選定、ツール間の値の整合に便利です。
WCAGコントラストチェッカー
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
Ratio: —
WCAGのしきい値
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
比はWCAG 2.1の相対輝度から計算され、線形化されたsRGBチャンネルと重み 0.2126·R + 0.7152·G + 0.0722·B を使います。
フォーマットに関する注意
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
よくある質問
HSLとHSVがPhotoshop / Figmaの値と完全に一致しないのはなぜ?
丸めのためです。色相 (hue)、彩度 (saturation)、明度 (lightness) は連続値で、ツールごとに丸め方が異なります。hueで1°、saturationで1%の差は想定の範囲で、視覚的に同一です。
コントラストチェッカーはアルファ (透過) を考慮しますか?
いいえ。WCAGの比は完全に不透明な色を前提とします。前景が半透明の場合は、まず背景と合成してから、得られた不透明色を確認してください。
新しいコントラストアルゴリズムのAPCAについては?
APCAはWCAG 3.0 (まだドラフト) においてWCAG 2.xの比の置き換え候補です。今日の本番作業では、監査者やLighthouseが確認するのはWCAG 2.1の比です。
何かサーバーに送信されますか?
いいえ。すべての変換とコントラスト計算はあなたのブラウザで動作します。