色コード変換とコントラスト比
ブラウザ内処理ファイルはアップロードされませんこの処理はブラウザ内で完結します。ファイルはどこにも送信されません。
HEX・RGB・HSLを相互に変換します。文字色と背景色を入れると、コントラスト比とアクセシビリティ基準（WCAG）の合否も同時に出ます。
入力
- HEX
#0E7566 - RGB
rgb(14, 117, 102) - HSL
hsl(171, 79%, 26%)
HSL は整数に丸めて表示しています。この値を貼り直すと、元の色から最大で3/255ほどずれることがあります（HEXとRGBは元の値のままです）。境界に近い色では、上のコントラスト比の合否が変わることがあります。
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%)
HSL は整数に丸めて表示しています。この値を貼り直すと、元の色から最大で3/255ほどずれることがあります（HEXとRGBは元の値のままです）。境界に近い色では、上のコントラスト比の合否が変わることがあります。
出力
この大きさが小さい文字の見え方です。長い文章もこの太さで読むことになります。
大きい文字の見え方
コントラスト比5.59:1
- 小さい文字 AA 4.5:1満たす
- 大きい文字 AA 3:1満たす
- UI部品・境界線 3:1満たす
- 小さい文字 AAA 7:1満たさない
「大きい文字」はおよそ24px以上、太字なら19px以上が目安です。それ未満は小さい文字の基準（4.5:1）で判断してください。
関連するツール
ツール一覧特長
- 変換と判定を一度に
- 実務で足りないのは変換そのものより「この色を文字に使ってよいか」です。2色を入れれば比と合否がその場で出るので、色を決める作業の中で判断できます。
- 大きい文字の基準も出す
- 4.5:1は小さい文字の基準で、およそ24px以上（太字なら19px以上）は3:1で足ります。片方だけで判定すると、直さなくてよいものまで直すことになります。両方の合否を並べています。
- 実際の見え方を隣に置く
- 数値だけでは印象がつかめないので、その2色で組んだ文字見本を並べています。比が足りていても読みにくい配色は存在します。
使い方
2色を入れる
HEX（#0E7566）、rgb()、hsl() のどれでも受け付けます。3桁の短縮形も使えます。
変換結果を取る
各形式の右のボタンで、そのまま貼れる形をコピーできます。
合否を読む
コントラスト比と、小さい文字・大きい文字・UI部品それぞれの基準に対する合否が出ます。
用語と読み方
- コントラスト比
- 2色の明るさの差を1:1〜21:1で表した数値です。白と黒が21:1、同じ色同士が1:1になります。単純な明度差ではなく、人の目の感度に合わせた重み付けで計算します。
- AAとAAA
- WCAGという指針の達成度です。小さい文字ではAAが4.5:1、AAAが7:1。多くのサイトはAAを目標にします。
- UI部品の3:1
- ボタンの枠、入力欄の境界、アイコンなど「文字ではないが意味を持つもの」の基準です。文字より緩く、3:1が下限になります。
- HEX・RGB・HSLの使い分け
- 同じ色を3通りに書いただけで、表せる範囲は同じです。HEXは短く貼りやすいので指定に、RGBは計算に、HSLは調整に向きます。HSLは「色みはそのままで明るさだけ下げる」といった操作が数字1つでできるため、配色の派生を作るときに扱いやすくなります。
- 「大きい文字」の基準
- 18ポイント（およそ24px）以上、または太字で14ポイント（およそ18.5px）以上です。この大きさになると必要なコントラスト比が下がり、AAで3:1、AAAで4.5:1になります。見出しが基準を満たすのに本文が満たさない、という食い違いはここから生まれます。
- 相対輝度
- コントラスト比の計算に使う、その色の明るさの値です。RGBの各成分をガンマ補正で戻してから、緑を重く（0.7152）、赤を中程度（0.2126）、青を軽く（0.0722）重み付けして足します。青は明るく感じにくいため、青系の色は数値上のコントラストが伸びにくくなります。
よくある質問
- 入力した色は送信されますか。
- されません。変換も比の計算もブラウザの中だけで行われます。
- 比は足りているのに読みにくく感じます。
- 起こります。コントラスト比は明るさの差だけを見ていて、色相の差や字の細さは考慮しません。見本を並べているのはそのためで、最後は目で確かめてください。
- 透明度のある色は扱えますか。
- 扱えません。半透明の色は下に重なる色で見え方が変わるため、比が一意に決まらないためです。実際に重なった後の色を入れてください。
- 基準を満たすように色を直すには、どちらを動かせばよいですか。
- 背景のほうが直しやすいことが多いです。文字色はブランドの色に縛られていることが多いのに対し、背景は明るさを少し動かしても印象が変わりにくいためです。HSLに切り替えて明度（L）だけを5ずつ動かし、比が基準を超えたところで止めるのが手早い方法です。色相と彩度はそのままなので、配色の性格は保たれます。
- ダークモードでも同じ基準ですか。
- 同じです。ただし、明るい背景で成立した組み合わせが暗い背景でそのまま成立するとは限らないので、両方の配色で確かめる必要があります。とくに、明るい背景で使っていた彩度の高い色は、暗い背景に置くと比が足りなくなりがちです。
- 色覚の違いには対応していますか。
- この道具が見ているのは明るさの差だけで、色の見分けやすさは判定していません。コントラスト比を満たしていても、赤と緑のように色相だけで区別している情報は、見分けられない人がいます。色だけで意味を伝えないこと（形・文字・位置を併用すること）は、比とは別に必要な配慮です。
スポンサーリンク