カラーコントラストチェッカー
カラーコントラストチェッカーとは？
各機能の説明
-
リアルタイムコントラスト比計算背景色・文字色のHexコードを入力するか、カラーピッカーで色を選ぶと、コントラスト比が即座に「○.○○ : 1」形式で表示されます。
-
WCAG 2.1 AA/AAA 4項目判定「AA通常テキスト（4.5:1以上）」「AA大きな文字（3.0:1以上）」「AAA通常テキスト（7.0:1以上）」「AAA大きな文字（4.5:1以上）」の4基準をそれぞれPASS/FAILで判定します。
-
実務直結プレビュー選択した配色が見出し・本文テキスト・リンク・ボタンにリアルタイム反映されます。実際のWebコンポーネントとしての視認性をその場で確認できます。
-
AA合格への自動調整コントラスト比がAA基準（4.5:1）に届いていない場合、ボタン一つで文字色の明度を自動調整してAA合格ラインを満たす最も近い色に変換します。色相（色み）は変わりません。
-
前景色・背景色の入れ替えスワップボタンで背景色と文字色を一瞬で反転。ダークモード配色の確認にも便利です。
-
CSSコード・Hexのワンクリックコピー`color: #xxxxxx; background-color: #xxxxxx;` のCSSセットか、各Hexコードをボタン一つでクリップボードにコピーできます。
WCAG基準について
-
WCAG（Web Content Accessibility Guidelines）とはW3Cが策定するWebアクセシビリティの国際規格です。日本のJIS X 8341-3もWCAGに基づいており、公共機関や大企業のWebサイトで準拠が求められます。
-
AA基準（達成基準 1.4.3）通常テキストは4.5:1以上、18px以上の太字または24px以上の大きな文字は3.0:1以上が必要です。多くの実務プロジェクトで最低限クリアすべき水準です。
-
AAA基準（達成基準 1.4.6）通常テキストは7.0:1以上、大きな文字は4.5:1以上を求める最上位基準です。視覚的なアクセシビリティに高い水準が求められる場面で参照します。
-
大きな文字の定義WCAGでは「18pt（約24px）以上の通常テキスト、または14pt（約18.67px）以上の太字テキスト」を「大きな文字」と定義しています。見出しやキャッチコピーが該当することが多いです。
-
コントラスト比の計算方法WCAG指定の相対輝度（Relative Luminance）に基づき、RGB各チャンネルをリニア変換して輝度値を算出し、明るい色÷暗い色＋0.05で比率を求めます。本ツールはこの計算式をJavaScriptで忠実に再現しています。
こんなときに使う
-
デザインの配色決定前に確認したいときFigmaや紙のカンプで決めた配色がアクセシビリティ基準を満たすかどうかを、コーディング前にすばやくチェックできます。
-
リニューアル・アクセシビリティ対応案件のとき既存サイトのテキスト色・背景色の組み合わせを洗い出し、WCAGのAA基準を満たしているかを一つひとつ確認する作業に活用できます。
-
公共機関・行政・教育機関のWebサイト制作時JIS X 8341-3対応が義務付けられているプロジェクトでは、コントラスト比の確認と根拠の記録がほぼ必須です。本ツールで数値を素早く確認できます。
-
ボタン・バッジ・タグなどUI要素の色を決めるときプライマリボタンや通知バッジの文字色・背景色の組み合わせが視認性を担保しているかをプレビューで即時確認できます。
-
ダークモード対応の配色を検討するときスワップボタンで前景・背景を入れ替え、ライトモード・ダークモードそれぞれのコントラスト比を比較しながら調整できます。
よくある質問
-
コントラスト比はどのように計算されていますか？
WCAG 2.1が定める「相対輝度（Relative Luminance）」の算出式を使っています。RGBの各チャンネル値を0〜1に正規化し、ガンマ補正を除いてリニアな輝度値に変換後、輝度比を計算します。本ツールはこの計算式をJavaScriptで完全再現しており、WebAIMなどの国際標準ツールと同一の結果を得られます。
-
AA基準とAAA基準はどちらを目指すべきですか？
多くのWebサイトではAA基準（通常テキスト4.5:1以上）が実務上の最低ラインとして広く採用されています。公共機関・行政・教育機関のサイトや、より高いアクセシビリティが求められる場合はAAA基準（7.0:1以上）も視野に入れると良いでしょう。まずはAA基準をすべてのテキストでクリアすることを目標にするのが現実的です。
-
「大きな文字」とは何ピクセル以上のことですか？
WCAGでは、通常（非太字）で18pt（ブラウザ表示では約24px）以上、または太字（font-weight: bold相当）で14pt（約18.67px）以上のテキストを「大きな文字（Large Text）」と定義しています。サイト内の見出しやキャッチコピー等がこれに該当することが多く、大きな文字にはAA基準で3.0:1以上が適用されます。
-
自動調整ボタンで変更された色は元に戻せますか？
自動調整後の色はHex入力欄に表示されます。元の色に戻したい場合は、入力欄に元のHexコードを直接入力し直すか、カラーピッカーで再度選択してください。自動調整は「色相を保ちながら明度のみを変更する」アルゴリズムを採用しており、ブランドカラーのイメージを極力維持しながらコントラストを改善できます。
-
入力した色情報はサーバーに送信されますか？
すべての処理はブラウザ内のJavaScriptで完結しており、入力したHexコードや色情報が外部のサーバーに送信されることはありません。社内ブランドガイドラインの色や未公開のデザイン配色を安心して確認していただけます。