DESIGN
カラー変換・コントラスト
HEX⇄RGB⇄HSL の変換と、文字の読みやすさ（WCAG）の判定。履歴・ピン留め・共有リンクつき。
変換
- HEX
- #2B50C7
- RGB
- rgb(43, 80, 199)
- HSL
- hsl(226, 64%, 47%)
コントラスト判定
- コントラスト比
- 16.88 : 1
- WCAG（通常文字）
- AAA
- WCAG（大きい文字）
- AAA
- 非テキスト（UI部品・アイコン）
- 合格
よくある質問
コントラスト比の「AA」「AAA」とは何ですか？
Web Content Accessibility Guidelines（WCAG）が定める文字の読みやすさの基準です。通常サイズの文字ではAAが4.5:1以上、AAAが7:1以上のコントラスト比を満たす必要があります（大きい文字はAAが3:1以上）。数値が高いほど、視力の弱い方にも読みやすい配色です。
rgb() や hsl() の値を貼り付けて変換できますか？
できます。色の入力欄には #2B50C7 のようなHEXのほか、CSSからコピーした rgb(43, 80, 199) や hsl(225, 60%, 47%) の形式もそのまま貼り付けられます。解釈できない値のときは入力欄が赤枠になります。
HEX・RGB・HSLはどう違いますか？
HEX（例: #2B50C7）とRGB（赤・緑・青を0〜255で表す値）は、同じ色空間を別の表記にしたものです。HSLは色相（Hue）・彩度（Saturation）・輝度（Lightness）で色を表現し、「同じ色味のまま明るさだけ変える」といった調整がしやすい表記です。
コントラスト比はどうやって計算されますか？
2色それぞれの相対輝度（人の目の感度を考慮した明るさ）を求め、明るい方の輝度+0.05を暗い方の輝度+0.05で割った値です。真っ黒と真っ白の組み合わせが最大の21:1になります。
どんな場面でコントラスト比を確認すればよいですか？
本文のテキスト色と背景色の組み合わせを決めるときに使います。特に薄いグレーの文字や、彩度の高い背景色に白文字を乗せる場合はコントラスト比が不足しがちなので、配色を決める前に確認すると安心です。
履歴やピン留めはどこに保存されますか？
履歴はこの端末のブラウザ（localStorage）にのみ保存され、サーバーには送信しません。よく使う配色は★でピン留めしておくと、新しい履歴が増えても消えずに残ります。「ピン以外を消す」で未ピンの履歴だけまとめて削除できます。
共有リンクは何を含んでいますか？
「共有リンクをコピー」で、いま選んでいる色・文字色・背景色をURLのクエリに載せたリンクをコピーします。そのURLを開くと同じ配色が再現されるので、メモ代わりや他の人への共有に使えます。