コントラスト比計算｜WCAG AA・AAA判定

前景色と背景色を入力してください。

このツールでできること

前景色と背景色を不透明なsRGBのHEXで入力し、WCAG 2.x方式のコントラスト比を計算できます。文字プレビューに加え、通常テキストと大きなテキストのAA・AAA、UIコンポーネントや内容理解に必要なグラフィカルオブジェクトの3:1基準に対する参考判定を表示します。

使い方

前景色と背景色をHEXで入力するか、カラーピッカーで選びます。
必要なら「前景色と背景色を入れ替える」を押します。
「計算する」を押すか、入力欄でEnterキーを押します。
コントラスト比、文字プレビュー、5項目の判定を確認します。
必要なら「結果をコピー」を押し、2色、比率、5項目の判定をまとめてコピーします。

計算後にHEX入力やカラーピッカーを変更した場合と、色を入れ替えた場合は、古い結果を非表示にしてコピーを無効にします。「クリア」は前景色を#000000、背景色を#FFFFFFへ戻します。

入力例・出力例

前景色#000000、背景色#FFFFFFでは、最大のコントラスト比21:1になります。通常テキストと大きなテキストのAA・AAA、UI・グラフィカルオブジェクトの3:1参考判定は、すべて「適合」です。

前景色#777777、背景色#FFFFFFでは、次の結果になります。

コントラスト比: 4.47:1
通常テキスト AA: 不適合
大きなテキスト AA: 適合
通常テキスト AAA: 不適合
大きなテキスト AAA: 不適合
UI・グラフィカルオブジェクト 3:1: 適合

前景色#1A73E8、背景色#FFFFFFの表示は4.5:1で、通常テキストAAは「適合」です。前景色と背景色を入れ替えても、同じ2色間の比率と判定は変わりません。

よくある利用場面

本文や見出しの文字色と単色背景を配色決定前に確認するとき
入力欄やボタンの境界、フォーカス表示など、UIを識別するために必要な部分を隣接色と比較するとき
アイコンやグラフのうち、内容理解に必要な部分を周囲の色と比較するとき
2つのHEX色を入れ替え、文字プレビューを見ながら比較するとき

判定基準

通常テキストはAAが4.5:1以上、AAAが7:1以上です。大きなテキストはAAが3:1以上、AAAが4.5:1以上です。大きなテキストは、通常の太さでは18pt（おおむね24px）以上、太字では14pt（おおむね18.67px）以上が目安です。

UIコンポーネントでは、部品や状態を識別するために必要な視覚情報を隣接色と比べます。グラフィカルオブジェクトでは、内容理解に必要な部分が対象です。非アクティブな部品、装飾だけの図形、同じ情報を文字で示している図形など、対象外となる場合もあるため、このツールでは3:1との数値比較を参考表示にとどめます。

判定は選んだ2色だけを比較します。実際の文字サイズと太さ、隣接する色、操作状態、画像、透明度、適用除外などを含むページ全体のWCAG適合を保証するものではありません。

コントラスト比の計算方法と表示値

各HEXを8bit sRGBとして0〜1へ正規化し、各チャンネルを線形化します。正規化値が0.04045以下ならC / 12.92、それより大きければ((C + 0.055) / 1.055) ^ 2.4を使用します。相対輝度は線形化後のR、G、Bから0.2126R + 0.7152G + 0.0722Bで求めます。

明るい方の相対輝度をL1、暗い方をL2として、比率は(L1 + 0.05) / (L2 + 0.05)で計算します。表示値だけを小数点以下2桁で切り捨て、末尾の不要な0は省きます。適合判定には切り捨て前の比率を使うため、画面に表示された桁数へ丸め直して判定しないでください。

処理仕様

HEXは先頭の#が任意で、3桁または6桁の半角16進数を入力できます。3桁は各桁を2回ずつ使って展開し、正常な入力は#付き6桁大文字へ統一します。入力値の前後の空白は取り除きますが、値の途中にある空白や改行は拒否します。

透明度付きの4桁・8桁HEX、CSS色名、rgb(...)やhsl(...)、全角文字、背景画像、グラデーション、広色域の色空間には対応していません。透明色は背後の色との合成後に見える色が変わるため、このツールでは不透明な2色だけを比較します。APCA方式の判定は行いません。

入力が空、不正な桁数、16進数以外の場合は結果を表示せず、修正が必要な入力欄へフォーカスします。比率の範囲は同色の1:1から、不透明な黒と白の21:1までです。

入力データについて

入力した色の値と計算結果はお使いのブラウザ内だけで処理され、ToolRollのサーバーや外部サービスへ送信されません。外部APIや外部ライブラリは使用せず、Cookie、ローカルストレージ、セッションストレージ、IndexedDB、履歴にも保存しません。「結果をコピー」を押した場合だけ、2色、表示比率、5項目の判定をシステムのクリップボードへ書き込みます。