色変換・コントラストチェック
このツールについて
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 は異なります。両方表示してツールの慣例に合わせられます。
- 透明度はコントラストに影響しますか？
- はい。半透明の文字の実際のコントラストは下の背景に依存します。簡易プレビューは主に不透明な色で計算します。