カラーコントラストチェッカー｜WCAG準拠

前景色・背景色のコントラスト比を算出し、WCAG AA/AAA適合レベルを判定します。

前景色（テキスト色）
rgb(0, 0, 0)
背景色
rgb(255, 255, 255)
21.00:1
AA ✓AAA ✓AA 大 ✓
前景輝度: 0.0000
背景輝度: 1.0000
ライブプレビュー
小テキスト (12px) — 素早い茶色のキツネは怠け者の犬を飛び越えた
本文 (16px) — 素早い茶色のキツネは怠け者の犬を飛び越えた
大テキスト (24px) — 見出しサンプル
太字見出し (32px) — ディスプレイ
WCAG 2.1 判定結果
基準サイズ必要比結果
AA通常テキスト≥4.5✓ 合格
AA大テキスト≥3✓ 合格
AAA通常テキスト≥7✓ 合格
AAA大テキスト≥4.5✓ 合格
AAUIコンポーネント≥3✓ 合格
--fg: #000000; --bg: #ffffff;
おすすめカラーペア

関連記事

デザイン

カラーコントラストとは？WCAGのAA基準と文字色の選び方を解説

Webアクセシビリティに必要なカラーコントラスト比の仕組みを解説。WCAGのA…

続きを読む →

カラーコントラストチェッカー｜WCAG準拠とは

前景色と背景色のコントラスト比をWCAG AA・AAA基準でリアルタイム判定できる無料ツールです。Webアクセシビリティ対応・色のチェックに必須で、デザイナー・フロントエンドエンジニア・サイト運営者に広く使われています。登録不要でブラウザだけで即使用できます。

使い方

  1. 1前景色（テキスト色）をカラーピッカーまたはHEXコードで入力してください。
  2. 2背景色を同様に入力してください。
  3. 3コントラスト比がリアルタイムで計算され、WCAG AA・AAA・大きなテキストの適合レベルが自動判定されます。
  4. 4判定結果を確認し、不合格の場合は色を調整して再チェックしてください。

メリット・特徴

  • WCAG AA（4.5:1）・AAA（7:1）・大きなテキスト（3:1）の3レベルを自動判定
  • カラーピッカーとHEXコード入力の両方に対応しリアルタイムでコントラスト比を表示
  • 前景色・背景色のプレビューテキストで視覚的な見やすさを即確認
  • アクセシビリティ監査・デザインレビュー・コーディングに直結した判定結果
  • 登録不要・インストール不要、ブラウザだけで完結する完全無料ツール
  • 入力データはサーバーに送信されずブラウザ内のみで処理される
01

カラーコントラストとWCAGアクセシビリティ基準

Webアクセシビリティにおけるカラーコントラストは、視覚障害・色覚多様性・老眼など多様なユーザーが文字を読めるかどうかを左右します。WCAG（Web Content Accessibility Guidelines）はコントラスト比の最低基準を定めており、多くの国の法令・調達基準に採用されています。

WCAG 2.1のコントラスト比基準一覧

WCAG 2.1では成功基準1.4.3（テキストのコントラスト）と1.4.11（非テキストのコントラスト）が定められています。通常テキストはAA合格に4.5:1、AAA合格に7:1が必要です。18pt以上（または太字14pt以上）のラージテキストはAA合格に3:1、AAA合格に4.5:1が必要です。UIコンポーネント・グラフィック要素は3:1以上（AA）が求められます。

相対輝度（Relative Luminance）の仕組み

コントラスト比はWCAGが定義する相対輝度（Relative Luminance）を元に計算されます。RGBの各値をsRGBガンマ補正してリニア値に変換し、輝度Lを算出します。白（#FFFFFF）の輝度は1、黒（#000000）の輝度は0で、比率（L1+0.05）/（L2+0.05）がコントラスト比になります。このため最大コントラスト比は黒×白の21:1です。

色覚多様性とコントラスト設計

日本人男性の約5%、女性の約0.2%に何らかの色覚多様性があります。赤緑色覚（P型・D型）では赤と緑の区別が難しく、色だけで情報を伝えるデザインはアクセシビリティ上のリスクがあります。コントラスト比を高めることに加え、色以外の手がかり（アイコン・下線・太字など）を組み合わせることが推奨されます。

02

デザイン・開発でのコントラストチェック活用法

カラーコントラストのチェックはデザイン初期段階から組み込むことで、後からの修正コストを大幅に削減できます。デザイナーとエンジニアが同じ基準で確認できるツールを使うことが重要です。

ブランドカラーとアクセシビリティの両立

ブランドカラーが薄い色や彩度の高い色の場合、そのままテキストに使うとWCAG基準を満たせないことがあります。ブランドカラーをアクセントとして使いつつ、テキストには十分なコントラストを持つ色を選ぶアプローチが効果的です。同系色の中でコントラスト比を満たす明度の値をこのツールで探してください。

プレースホルダーテキストと無効状態のUI

フォームのプレースホルダーテキストや無効（disabled）ボタンはデザイン上あえて薄く表示されますが、WCAG基準では3:1以上が求められます。完全に無効化されている非インタラクティブなコンポーネントはWCAG 1.4.3の例外ですが、ユーザビリティ観点からなるべく読みやすい色を使うことを推奨します。

CI/CDへのアクセシビリティチェックの組み込み

フロントエンドのビルドパイプラインにaxe-core・Lighthouse CI・pa11yなどのアクセシビリティ自動テストを組み込むことで、コントラスト問題をリリース前に検出できます。このツールで設計段階のパレットを検証し、コード実装後は自動テストで回帰テストを行う二段構えが理想的です。

よくある質問（FAQ）

WCAG AAとWCAG AAAの違いは何ですか？
AAは通常テキストで4.5:1、大きなテキスト（18pt以上または太字14pt以上）で3:1が必要な標準準拠レベルです。AAAはより厳格で通常テキスト7:1・大テキスト4.5:1が必要です。多くのサイトではAA合格を目標とし、公共機関や高アクセシビリティが求められるサービスではAAA合格を目指します。
コントラスト比が低い場合はどうすればいいですか？
文字色を暗く（または背景を明るく）するか、その逆にしてコントラストを上げてください。このツールでリアルタイムに確認しながら調整できます。グレーテキストや薄いカラーテキストはコントラスト不足になりやすいため、特に注意が必要です。
アイコンやUIコンポーネントにもコントラスト基準はありますか？
はい。WCAG 1.4.11（非テキストのコントラスト）では、ボタン・フォームフィールド・グラフなどのUIコンポーネントやグラフィック要素に3:1以上のコントラスト比が必要です。アイコンのみのボタンは特に見落としやすいため注意してください。
コントラスト比はどのように計算されますか？
WCAG定義の相対輝度（Relative Luminance）を使って計算されます。各色のRGB値をsRGBリニア変換してからL1・L2を求め、比率（L1+0.05）/（L2+0.05）として算出されます。最小値は1:1（同色）、最大値は21:1（白黒）です。
日本のアクセシビリティ法令ではどのレベルが必要ですか？
日本のJIS X 8341-3（Webアクセシビリティ規格）はWCAG 2.1をベースにしており、官公庁・自治体サイトではAA準拠が義務化されています。民間サービスでも多くの企業がAA準拠を方針として採用しています。
大きなテキストとは何ポイント以上ですか？
WCAGでは18pt（約24px）以上の通常ウェイト、または14pt（約18.67px）以上の太字（font-weight: bold）をラージテキストと定義しています。ラージテキストのAA基準は3:1と緩和されます。

不具合や動作がおかしい点を見つけたら教えてください。

不具合報告はこちら →