色変換・コントラストチェック

HEX、RGB、HSL、HSV の色を変換し、WCAG に基づいて文字と背景のコントラストを確認します。

ファイルとコンテンツはブラウザ内でブラウザ上で処理され、サーバーにアップロードされません。

このツールについて

HEX、RGB、HSL、HSV で色を入力すると、他の形式の対応値を確認できます。文字色と背景色を選び、一般文字と大きな文字に対する WCAG AA または AAA の要件を満たすかどうかを確認できます。

できること

HEX、RGB、HSL、HSV の相互変換
色の即時プレビュー
WCAG コントラスト比の計算
AA/AAA の結果表示
色の値をコピー

使い方

色を入力: #hex、rgb()、hsl() を入力するかピッカーを使用。
値をコピー: CSS やデザインガイドに必要な形式をコピーします。
コントラストをチェック: 文字色と背景色を設定して読みやすさを確認。

例

ブランド配色が WCAG AA を満たすか確認する
Figma の HEX を CSS 変数用の hsl() に変換する
ダークモードの文字色を確認する
デザインシステムの色階層を記録する

制限事項

コントラストのプレビューでは透明度の扱いに制限があります
色の精度はモニター校正に依存
入力した色の値はブラウザ上で処理され、サーバーには送信されません。

よくある質問

WCAG AA のコントラスト比は？: 通常テキストは 4.5:1。大きいテキスト（18pt+ または 14pt 太字）は 3:1。
HSL と HSV の違いは？: HSL の lightness と HSV の value は異なります。両方表示してツールの慣例に合わせられます。
透明度はコントラストに影響しますか？: はい。半透明の文字の実際のコントラストは下の背景に依存します。簡易プレビューは主に不透明な色で計算します。