色形式の変換とコントラスト比の確認

機能

• HEX・RGB・HSL・HSV の相互変換。5 通りの書き方を同時に表示し、1つずつコピーできます
• 3桁・4桁・6桁・8桁の16進表記と rgba / hsla の透過に対応
• カラーピッカー・テキスト欄・色見本が三方でリアルタイムに連動。前景と背景を入れ替えるボタンも
• WCAG コントラスト比：正確な比を出し、AA(4.5:1)、AAA(7:1)、大きな文字の AA(3:1)、大きな文字の AAA(4.5:1) の4項目を判定
• その背景で最も読みやすい文字色と、そのときの比を提案
• 前景色に透過がある場合、比は不透明値で計算していると明示します

使い方

1. 入力欄に色の値を入れるか、カラーピッカーで直接選びます
2. 前景色と背景色をそれぞれ設定します。間がプレビューです
3. 下に変換結果と4段階のコントラスト判定が出ます
4. 各行の「コピー」でその形式だけを取り出せます

よくある質問

HSL と HSV は何が違いますか？

どちらも「色相 + 2つの成分」ですが、2つ目の成分が違います。HSL の L は明度で、L=100% は必ず白です。HSV の V は明るさで、V=100% は純色です。カラーピッカーの面板は狙いやすい HSV を使うことが多く、CSS では HSL のほうがよく使われます。

コントラスト比はどのくらい必要ですか？

WCAG 2 の AA は本文に 4.5:1 以上、大きな文字（およそ 24px 以上、または 18.66px 以上の太字）に 3:1 以上を求めます。AAA ではそれぞれ 7:1 と 4.5:1 に上がります。比は2色の相対輝度から決まり、文字の大きさや書体には依存しません。

他のツールと少し値が違うのはなぜですか？

主に丸めの違いです。このツールは WCAG の仕様に書かれた式どおりに計算し、表示は小数2桁にしています。比がちょうど 4.5 や 7 の近くにあるときは、このわずかな差で「適合／不適合」が入れ替わり得ます。その場合は安全なほうを採ってください。

半透明の色のコントラスト比はどう計算していますか？

不透明な値で計算し、その旨を画面に表示します。半透明の色の見え方は何の上に重なるかで変わるため、厳密には背景と合成してから比を求める必要があります。この数値は目安として扱ってください。