カラーピッカー・コントラスト比チェック
色を選んでHEX・RGB・HSLのコードを確認・コピーできます。ティントやシェード、補色などのパレットを作り、文字色と背景色のコントラスト比をWCAG基準で確認できます。
色を選ぶ
カラーピッカーでは透明度を指定できません。#1e88e580 や rgba(30, 136, 229, 0.5) のように入力した透明度は、ピッカーで色を変えても保たれます。
- HEX
#1e88e5- RGB
rgb(30, 136, 229)- HSL
hsl(208, 79%, 51%)
最近の色
まだありません。ピッカーやパレットで色を決めると、ここに最大10色まで並びます（ページを閉じると消えます）。
パレット
色の四角を押すとその色を現在の色にします。コピーは各「コピー」ボタンで行います。パレットは透明度なしで作ります。
明るさの段階（ティント・シェード）
#d2e7fa#a5cff5#78b8ef#4ba0ea#1e88e5#186db7#125289#0c365c#061b2e
補色
#1e88e5#e57b1e
類似色（±30°）
#1ee5de#1e88e5#1e25e5
分裂補色（150°・210°）
#1e88e5#e51e25#e5de1e
トライアド（120°ずつ）
#1e88e5#e51e88#88e51e
パレットを書き出す
コントラスト比チェック
通常の文字のサンプルです（16px）
大きな文字のサンプル（24px）
コントラスト比
4.48:1
| 基準 | 判定 |
|---|---|
| AA 通常の文字（4.5:1以上） | ✗ 不適合 |
| AA 大きな文字（3:1以上） | ✓ 適合 |
| AAA 通常の文字（7:1以上） | ✗ 不適合 |
| AAA 大きな文字（4.5:1以上） | ✗ 不適合 |
半透明の文字色は、背景色に重ねた色で計算しています。
背景色の透明度は無視し、不透明な色として計算しています。
WCAG 2.2 の達成基準 1.4.3（AA）と 1.4.6（AAA）の数値で判定します。大きな文字は18pt（24px）以上、または太字14pt（約18.66px）以上です。比は四捨五入せず判定します（4.49:1 は 4.5:1 未満）。
使い方
- カラーピッカーで色を選ぶか、「色の値」に #1e88e5、rgb(30, 136, 229)、hsl(208, 79%, 51%) のように入力します。
- HEX・RGB・HSLそれぞれの「コピー」ボタンでコードをコピーします。
- 「パレット」に明るさの段階や補色などが表示されます。色の四角を押すと現在の色になり、「コピー」でコードをコピーできます。
- 「パレットを書き出す」で形式（CSS変数・SCSS変数・JSON）と名前の接頭辞を選び、まとめてコピーします。
- 「コントラスト比チェック」に文字色と背景色を入れると、比率とAA・AAAの判定が表示されます。
注意事項
- ブラウザのカラーピッカーでは透明度を選べません。透明度は #rrggbbaa や rgba() で入力してください。
- 色名（red など）、hwb()、lab()、oklch() などの形式は読み取れません。
- パレットは透明度なしで作ります。補色などは HSL で色相を回して求めるため、見た目の印象とは一致しないことがあります。
- コントラスト比の背景色は不透明として扱い、透明度は無視します。
- 判定はWCAGの数値基準との比較で、アクセシビリティ全体の適合を示すものではありません。最近の色は保存せず、ページを閉じると消えます。
計算・変換の仕組み
ティントは白、シェードは黒をそれぞれ20%・40%・60%・80%の割合でsRGB上で混ぜた色です。
補色は色相を180°、類似色は±30°、分裂補色は150°と210°、トライアドは120°と240°回した色です（彩度・明度はそのまま）。
コントラスト比はWCAG 2.2の相対輝度から (明るい方 + 0.05) ÷ (暗い方 + 0.05) で求めます。半透明の文字色は背景に重ねた色で計算します。
基準は達成基準1.4.3（AA：通常4.5:1、大きな文字3:1）と1.4.6（AAA：通常7:1、大きな文字4.5:1）です。
よくある質問
コントラスト比 4.48:1 は AA に適合しますか？
通常の文字は4.5:1以上が必要なので不適合です。大きな文字（3:1以上）なら適合します。WCAGでは比率を切り上げて判定しないため、このツールも4.5未満は不適合と表示します。
透明度のある色を使えますか？
使えます。#1e88e580 や rgba(30, 136, 229, 0.5) のように入力してください。コントラスト比では半透明の文字色を背景に重ねて計算します。
書き出したCSS変数はどう使いますか？
:root に定義された変数を、color: var(--color-base); のように参照して使います。接頭辞は自由に変えられます。
入力した色はどこかに送信されますか？
いいえ。計算はすべてブラウザ内で行い、保存も送信もしません。
関連ツール
最終更新日：