入力した色情報はサーバーに送信されますか?

いいえ。コントラスト比の計算と判定はすべてブラウザ内で行われ、ネットワーク通信は発生しません。

AA と AAA の基準値はいくつですか?

WCAG 2.x では、通常の文字は AA が 4.5:1・AAA が 7:1、大きな文字 (18pt / 24px 以上、または 14pt / 18.66px 以上の太字) は AA が 3:1・AAA が 4.5:1 です。UI 部品やグラフィック要素 (アイコン・境界線など) は WCAG 1.4.11 で 3:1 が求められます。このツールは比率を小数第 2 位に丸めた値でしきい値と比較します (WebAIM と同じ運用)。

コントラスト比はどう計算していますか?

WCAG の定義に従い、sRGB の各チャンネルを線形値に変換してから相対輝度 L を求め、(明るい方の L + 0.05) / (暗い方の L + 0.05) で算出しています。チャンネルの線形化は c ≦ 0.03928 のとき c/12.92、それ以外は ((c+0.055)/1.055)^2.4 を使います。

アルファ (透明度) には対応していますか?

現在は不透明な色のみに対応しています。半透明の前景色は、実際に合成される背景と重ねたうえでの実効的な色を求める必要があり、結果が背景に依存するため未対応です。rgba() を入力した場合はアルファ値を無視して RGB だけを使います。

WCAG 2.x のコントラスト比と APCA (WCAG 3) は違いますか?

違います。このツールは現行の WCAG 2.x が定める相対輝度ベースの比率を計算します。WCAG 3 で検討されている APCA は知覚輝度に基づく別の指標で、しきい値も計算式も異なります。AA / AAA 適合の判定には WCAG 2.x の値を使ってください。

開発へ戻る

コントラスト比チェッカー — WCAG AA / AAA 判定

前景色 (文字色) と背景色を選ぶだけで、WCAG 2.x のコントラスト比を計算し、通常の文字・大きな文字・UI 部品それぞれで AA / AAA を満たすかをその場で判定します。HEX と rgb() 入力、カラーピッカー、ライブプレビュー付き。すべてブラウザ内で処理され、色情報は外部に送信されません。

開発色

使い方

前景色 (文字色) と背景色を、カラーピッカーで選ぶか HEX (#RRGGBB / #RGB) または rgb() 形式で直接入力してください。入力するたびにコントラスト比が再計算され、通常の文字・大きな文字・UI 部品それぞれについて WCAG 2.x の AA / AAA を満たすかが緑 (合格) / 赤 (不合格) のバッジで表示されます。背景色の上に前景色で表示したプレビューも同時に更新されるので、実際の見え方を確認できます。「前景 / 背景を入れ替え」で文字色と背景色を交換でき、「サンプル」で見落としがちな低コントラストの組み合わせを読み込めます。コントラスト比はテキストや図形の見やすさを 1:1 (同色) 〜 21:1 (黒と白) で表す指標です。

よくある質問

入力した色情報はサーバーに送信されますか?: いいえ。コントラスト比の計算と判定はすべてブラウザ内で行われ、ネットワーク通信は発生しません。
AA と AAA の基準値はいくつですか?: WCAG 2.x では、通常の文字は AA が 4.5:1・AAA が 7:1、大きな文字 (18pt / 24px 以上、または 14pt / 18.66px 以上の太字) は AA が 3:1・AAA が 4.5:1 です。UI 部品やグラフィック要素 (アイコン・境界線など) は WCAG 1.4.11 で 3:1 が求められます。このツールは比率を小数第 2 位に丸めた値でしきい値と比較します (WebAIM と同じ運用)。
コントラスト比はどう計算していますか?: WCAG の定義に従い、sRGB の各チャンネルを線形値に変換してから相対輝度 L を求め、(明るい方の L + 0.05) / (暗い方の L + 0.05) で算出しています。チャンネルの線形化は c ≦ 0.03928 のとき c/12.92、それ以外は ((c+0.055)/1.055)^2.4 を使います。
アルファ (透明度) には対応していますか?: 現在は不透明な色のみに対応しています。半透明の前景色は、実際に合成される背景と重ねたうえでの実効的な色を求める必要があり、結果が背景に依存するため未対応です。rgba() を入力した場合はアルファ値を無視して RGB だけを使います。
WCAG 2.x のコントラスト比と APCA (WCAG 3) は違いますか?: 違います。このツールは現行の WCAG 2.x が定める相対輝度ベースの比率を計算します。WCAG 3 で検討されている APCA は知覚輝度に基づく別の指標で、しきい値も計算式も異なります。AA / AAA 適合の判定には WCAG 2.x の値を使ってください。

類似のツール

カラー変換 — HEX / RGB / HSL / HSV を相互

HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。

開発色変換

画像カラーピッカー — HEX / RGB / HSL 取得

JPEG / PNG / WebP をアップロードし、画像内の任意の位置をクリックするとそのピクセルの色を HEX / RGB / HSL で取得できます。ホバー中はルーペで拡大表示し、ピックした色は履歴として一覧表示。各値はワンクリックでコピー可能です。画像は外部に送信されず、すべての処理はブラウザ内で完結します。

画像色

色覚シミュレーション — 色覚多様性の見え方

画像が 1 型 (P 型・赤)・2 型 (D 型・緑)・3 型 (T 型・青) 色覚や 1 色覚 (全色盲) でどう見えるかをシミュレートします。デザインや資料の色使いがアクセシブルか確認するのに。Canvas + 色覚変換行列でブラウザ内処理、画像はアップロードされません。

画像色

色補間 — 2 色を N ステップで混ぜてパレット生成

2 色 (HEX または CSS 色名) を線形補間して N 段階のパレットを生成します。補間モードは RGB (素直な混色) と HSL (色相を最短距離で回す混色)。Tailwind 風の 11 階調を作る、デザイントークン用のシェード生成、グラデーション CSS の中間色サンプル、アクセシビリティのテキスト読み取り用カラーステップ作成、といった用途に。各 swatch は HEX をクリックでコピー、CSS `linear-gradient` 文字列もコピー可能。すべてブラウザ内で完結します。

開発色