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

カラーコントラストチェッカーとは？

カラーコントラストチェッカーは、デザイナー・開発者・アクセシビリティ担当者向けの無料オンライン WCAG／APCA コントラストチェックツールです。HEX（#rgb・#rrggbb・アルファ付き 8 桁 #rrggbbaa）、rgb()/rgba()、hsl()/hsla() を受け付け、測定前に半透明の前景を背景へ合成し、WCAG 2.1 比（1:1〜21:1）と APCA Lc（明度コントラスト）スコアの両方を示します。WCAG 2.1 レベル AA（通常 4.5:1、大 3:1）と AAA（通常 7:1、大 4.5:1）を判定し、非テキストの UI コンポーネント・グラフィック用に 3:1 バッジを加え、最も近い合格前景色を提案します（明度だけを AA または AAA を満たすまで調整）。ワンクリックで適用できます。

カラーコントラストチェッカーの使い方

1. 前景（テキスト）色を HEX・rgb()・hsl() で入力（アルファ付きの 8 桁 HEX や rgba も可）、またはカラーピッカーをクリックして視覚的に選びます。
2. 背景色も同じ方法で入力します。コントラスト測定の前に、半透明の前景は背景へ（背景は白へ）合成されます。
3. 入れ替えボタンでいつでも前景色と背景色を交換できます。
4. WCAG 2.1 コントラスト比と、そのすぐ隣に表示される APCA Lc スコアを確認します。
5. 通常・大きいテキストの AA・AAA バッジと、UI コンポーネント・グラフィック用の 3:1 バッジを確認します。
6. 組み合わせが不適合なら、最も近い AA または AAA の合格色を見て「適用」をクリックし前景色を更新します。

使用例

前景 #595959、背景 #ffffff

比率 7.00:1、APCA Lc も高い — 通常・大きいテキストともに AA と AAA に適合

前景 #00000080（50% 黒）を #ffffff の上に

まず不透明なグレーに合成し、その後 WCAG 比と APCA Lc を計算

前景 #999999 と #ffffff — 2.85:1、AA 不適合

最も近い AA 色を開き「適用」をクリックすると、同じ色相のまま 4.5:1 に到達

よくある質問

WCAG が求めるコントラスト比はどのくらいですか？

WCAG 2.1 レベル AA は通常テキスト 4.5:1 以上、大きいテキスト 3:1 以上、レベル AAA は 7:1 と 4.5:1 が必要です。非テキストの UI コンポーネントやグラフィック（SC 1.4.11）は 3:1 が必要です。本チェッカーはこれらの各しきい値に適合/不適合バッジを表示します。

APCA Lc スコアとは何ですか？

APCA（アクセシブル知覚コントラストアルゴリズム）は WCAG 3 で提案されているコントラスト手法です。おおよそ 0〜108 の明度コントラスト（Lc）値を返し、値が大きいほどコントラストが高く、極性（明地に暗字か暗地に明字か）も考慮します。WCAG 2.1 比の隣に表示され、単一の合否ではなく独自のガイダンス基準を用います。

最も近い合格色の提案はどう動きますか？

前景の色相と彩度は保ち、明度だけを明るく／暗く調整して、背景に対するコントラストが AA（4.5:1）または AAA（7:1）を満たすまで探し、ワンクリックで適用できます。背景が中間調で目標に届かない場合は、可能な限り近い色を代わりに表示します。

どの色形式を入力できますか？

HEX（#rgb・#rrggbb に加え、アルファ付きの #rgba と 8 桁 #rrggbbaa）、rgb()/rgba()、hsl()/hsla() に対応し、各フィールドにネイティブのカラーピッカーがあります。比率計算の前に、半透明の前景は背景（背景自体は先に白へ合成）へ合成されます。色名には対応していません。

私の色はサーバーに送信されますか？

いいえ。解析・合成・輝度・比率・APCA の計算はすべて JavaScript でブラウザ内のローカルで実行されます——色はアップロードされず、サーバーには何も送信されないため、プライバシーが保たれ、ページ読み込み後はオフラインでも動作します。