カラーコード変換ツール
HEX・RGB・HSLのカラーコードを相互変換し、背景色と文字色の組み合わせがWCAGのコントラスト基準を満たすかを確認します。処理はすべてブラウザ内で完結し、入力内容がサーバーへ送信されることはありません。
背景色・文字色のコントラストを確認
コントラスト比: 15.90 : 1
通常の文字・AA（4.5:1以上）
基準を満たしています。
通常の文字・AAA（7.0:1以上）
基準を満たしています。
大きな文字・AA（3.0:1以上）
基準を満たしています。
大きな文字・AAA（4.5:1以上）
基準を満たしています。
カラーコード変換の使い方
色を指定する
カラーピッカー、またはHEX・RGB・HSLいずれかのテキスト欄に値を入力します。どれか1つを変更すると、残りの表示も自動的に更新されます。
変換結果を読み取る
色見本と、HEX・RGB・HSLそれぞれの表記が一致していることを確認し、必要な形式をコピーしてCSSやデザインツールへ貼り付けます。
背景色・文字色の組み合わせを確認する
下部で背景色と文字色を選び、コントラスト比とWCAG基準（AA・AAA、通常文字・大きな文字）の判定を確認します。サンプルテキストで実際の見え方も確認できます。
仕組みと考え方
HEX（#rrggbb）・RGB（赤緑青それぞれ0〜255）・HSL（色相・彩度・明度）は、いずれも同じ色空間を別の表現で表したものです。本ツールはRGBを内部の基準値とし、HEXやHSLへの入力があれば標準的な変換式でRGBへ正規化してから、他の2形式へ書き戻しています。そのため3つの表記は常に同じ色を指しますが、四捨五入の関係で往復変換すると小数点以下の誤差により、まれに元の数値からわずかにずれることがあります。
コントラスト比は、WCAG（Web Content Accessibility Guidelines）2.1が定める計算式で求めています。まずsRGBの各色成分を「相対輝度」という人の目の感度に近い値に変換し、明るい方の輝度に0.05を足した値を、暗い方の輝度に0.05を足した値で割ります。白と黒の組み合わせが理論上の最大値である21:1になり、同じ色同士では必ず1:1になります。
WCAGは文字の大きさに応じて基準を分けています。通常の文字はAA基準で4.5:1以上、AAA基準で7.0:1以上、太字や大きな文字（目安として18pt以上、太字なら14pt以上）はAA基準で3.0:1以上、AAA基準で4.5:1以上が推奨値です。行政機関のWebサイトや公共性の高いサービスではAA基準への準拠が求められることがあります。
使いどころ・注意点
- 本文の文字色と背景色は、最低でもAA基準（通常文字4.5:1）を満たすと多くの人にとって読みやすくなる。
- ロゴやアイキャッチなど装飾的な色使いにはコントラスト基準は必須ではないが、ボタンやリンクなど操作に関わる要素には適用を検討する。
- デザインツール（Figma等）からコピーしたHEXコードをそのまま貼り付けて、CSS用のRGB・HSL表記に変換する用途にも使える。
- 同じ色相でも彩度・明度を変えるだけで、コントラスト比が大きく変わることがある。配色を決める際はHSL表記で明度を意識すると調整しやすい。
よくある質問
入力した色は保存・送信されますか？
いいえ。変換と判定はすべてブラウザ内で行い、当サイトのサーバーへは送信していません。
コントラスト比が基準を満たしていれば、デザインとして問題ないですか？
文字の可読性という観点では基準を満たしていることが望ましいですが、配色の good/bad はデザイン全体の文脈にもよります。基準はあくまで最低限の目安としてご利用ください。
RGBAやHSLAの透明度（アルファ値）は変換に反映されますか？
反映されません。本ツールは不透明な色としてRGB値のみを扱うため、透明度の情報は無視されます。
HEXの3桁省略形（例: #fff）は使えますか？
使えます。#fffのような3桁表記も6桁表記と同じ色として解釈します。
往復変換すると数値が少しだけ変わるのはなぜですか？
HSLは小数を含む計算のため、RGBの整数値へ変換する際に四捨五入が発生します。色そのものが目に見えて変わることはほとんどありませんが、厳密な数値の一致が必要な場合はRGB・HEX表記を基準にしてください。