About
表示言語: 日本語 英語に切り替え

カラーコンバーター & コントラストチェッカー

HEX、RGB、HSL の間で変換し、任意の 2 色間の WCAG アクセシビリティコントラストをチェックします。すべてブラウザで動作します。

カラーコンバーター

WCAG コントラストチェッカー

通常テキスト (16 px)

大きいテキスト (24 px / 太字 18.66)

コントラスト比 —
WCAG AA 通常テキスト— 大きいテキスト—
WCAG AAA 通常テキスト— 大きいテキスト—
  1. スウォッチで色を選ぶか HEX、RGB、HSL の値を入力 — 他は自動更新されます。
  2. コントラストチェッカーまでスクロールし、前景色と背景色を設定します。
  3. 計算された比率と、通常テキストと大きいテキストの AA / AAA の合否バッジを読み取ります。
  4. どちらかの色を調整して、比率がデザインに必要なしきい値を超えるまで合わせます。
何ができるのか?

コンバーターは HEX (#rrggbb)、RGB (rgb(r, g, b))、HSL (hsl(h, s%, l%)) の間で 1 つの色をリアルタイムに変換するので、デザインシステムが使う形式を貼り付けて他の 2 つを得られます。コントラストチェッカーは前景と背景を取り、sRGB ガンマカーブを通して両方を線形化し、通常および大きいテキストサイズの AA / AAA 判定とともに WCAG 2.x コントラスト比を報告します。

例

入力 — 典型的なブランドブルー:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

背景として白 (#ffffff) と組み合わせ:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

なぜこの色の組み合わせで WCAG AAA が失敗するのか?

注意すべき最も一般的なコントラストと変換の落とし穴はこれらです:

  • AA large を AA normal と混同。 大きいテキストは 3:1 で足りるので、H1 で読みやすいリンクでも本文サイズでは失敗することがあります。ペアが 3.5:1 に達すれば、見出しは通りますが段落は通りません。
  • HSL 明度をコントラストの代わりに使う。 hsl(0, 100%, 50%) (赤) と hsl(240, 100%, 50%) (青) はどちらも L=50% ですが輝度は大きく異なります。コントラストは常に RGB 値から計算し、HSL 明度からは計算しないでください。
  • アルファ合成を忘れる。 白の上の rgba(0, 0, 0, 0.6) のテキストは実質 #666666 です。半透明値ではなくフラット化された HEX をチェックしてください。
  • 間違った hex の長さ。 #fff は #ffffff に展開されますが、#ffff はアルファバイト付きの 4 桁の短い形式です。HEX フィールドが静かに入力を拒否する場合は桁数を再確認してください。
  • display-P3 と sRGB の混在。 ワイドガモットモードの Figma などのデザインツールから取った色は sRGB 範囲外にある可能性があり、ブラウザはそれらをクリップします。HEX をコピーする前にソースツールで sRGB に変換してください。
  • 純白のみに対してコントラストをテストする。 実際のレイアウトがテキストを #f3f4f6 や写真の上に置く場合、見えるコントラストは低くなります。実際の背景でテストしてください。
よくある質問

WCAG AA に合格するにはどのコントラスト比が必要ですか?

WCAG 2.1 AA は通常の本文テキストに 4.5:1、大きいテキストに 3:1 を要求し、大きいとは少なくとも 18 pt (24 px) レギュラーまたは 14 pt (18.66 px) 太字を意味します。UI コンポーネントとグラフィカルオブジェクトは背景に対して 3:1 が必要です。AAA は通常テキストで 7:1、大きいテキストで 4.5:1 にハードルを上げます。

入力した HSL が少し異なる RGB 値を返すのはなぜですか?

ほとんどのツールで HSL は整数パーセントで保存されるので、RGB から HSL から RGB のラウンドトリップは各チャンネルで 1 単位ずれる可能性があります。そのドリフトは JND 内で画面上は見えませんが、正確なラウンドトリップ忠実性が必要なら、HEX または RGB 値を真実の源として保ち、HSL はビューとして扱ってください。

このツールはコントラストに sRGB ガンマ補正を使いますか?

はい。コントラスト計算は WCAG 2.x 公式に従い、各 sRGB チャンネルをガンマカーブで線形化し、相対輝度を計算し、(L1 + 0.05) / (L2 + 0.05) を取ります。チャンネルの単純平均や素朴な HSL 明度は誤解を招く数字を出し、WCAG の結果と一致しません。

アルファや半透明の色はどう扱いますか?

WCAG コントラストは不透明な背景に対して定義されるので、先に実際の背景の上で前景を合成してアルファを平坦化してください。例えば、白ページ上の 50% 黒のテキストブロックは実質 #ffffff 上の #808080 です。半透明値の代わりにその平坦化された HEX をチェッカーに渡してください。

HEX #rgb は #rrggbb と同じですか?

はい。3 桁の短い形式は各ニブルを繰り返して展開するので、#f0c は #ff00cc になります。4 桁と 8 桁の形式はアルファチャンネルを追加します。このツールは 3 桁、6 桁、8 桁の HEX を受け入れ、WCAG は不透明な合成色を要求するのでコントラストではアルファバイトを情報としてのみ扱います。

入力または選択した色を保存しますか?

いいえ。テスト、変換、コントラストチェックした色の記録は一切保持しません。入力したものやピッカーにドラッグしたものはタブを閉じると破棄されます — ロギングなし、色の値に対する分析もありません。自分で確認したい場合はブラウザの developer tools を覗いてください。