WCAGコントラストチェック
WCAGのAA・AAAアクセシビリティ基準への適合を確認するために色のコントラスト比をチェックします
入力とオプション
クイックプリセットと例
ブラウザで動作します。入力内容はこのデバイス内に留まります。
結果
値を入力すると結果が表示されます。
WCAGコントラストチェックについて
この無料オンラインWCAGコントラストチェックは、デザイナー、開発者、アクセシビリティの専門家が、文字色と背景色の組み合わせがWeb Content Accessibility Guidelines (WCAG) 2.1のコントラスト要件を満たしているかを確認するためのツールです。十分な色のコントラストを確保することで、ロービジョンや色覚特性のある方を含むすべてのユーザーが、ウェブコンテンツを読み、操作できるようになります。
このツールは、W3C公式の相対輝度の計算式を使って任意の2色間のコントラスト比を計算し、通常テキストと大きいテキストのそれぞれについて、その組み合わせがWCAG AAとWCAG AAAの適合レベルを満たすかどうかをすぐに表示します。計算はすべてブラウザー内でリアルタイムに行われ、データがサーバーに送信されることはありません。
アクセシビリティ監査の実施、新しいインターフェースの設計、既存コンテンツの準拠状況の確認など、どのような場面でも、このコントラストチェックは標準に沿った正確な結果を、リアルタイムのテキストプレビューや、基準を満たさない色の組み合わせを修正するための具体的な提案とともに提供します。
WCAGのコントラスト要件について
ウェブアクセシビリティの国際的に認められた標準が、World Wide Web Consortium (W3C)の公開するWeb Content Accessibility Guidelines (WCAG)です。WCAGは、さまざまな視覚能力を持つユーザーにとってテキストが読みやすいように、コントラスト比の具体的な基準値を定めています。
- WCAGレベルAA（通常テキスト）: コントラスト比は4.5:1以上が必要です。本文、段落、および18pt (24px)未満または太字14pt (太字18.66px)未満のすべてのテキストに適用されます。
- WCAGレベルAA（大きいテキスト）: コントラスト比は3:1以上が必要です。大きいテキストとは、18pt (24px)以上、または太字で14pt (太字18.66px)以上のテキストを指します。
- WCAGレベルAAA（通常テキスト）: コントラスト比は7:1以上が必要です。これは通常サイズのテキストに対するアクセシビリティ適合の最高レベルです。
- WCAGレベルAAA（大きいテキスト）: AAA適合レベルでは、大きいテキストに4.5:1以上のコントラスト比が必要です。
少なくともWCAG AAを満たすことは、アクセシブルなウェブデザインの基本水準とされており、Americans with Disabilities Act (ADA)、European Accessibility Act、リハビリテーション法のSection 508をはじめ、世界各国の多くの法的枠組みで求められています。WCAG AAAは、実現可能な場合に推奨されるより高いレベルのアクセシビリティです。
コントラスト比の計算方法
2色間のコントラスト比は、WCAG 2.1仕様で定義されている各色の相対輝度から求められます。相対輝度は、色の知覚的な明るさを0（最も暗い黒）から1（最も明るい白）の範囲で表したものです。
計算は3つのステップで行います。まず、赤・緑・青の各色チャンネルを8ビットのsRGB値（0-255）から、255で割って正規化したsRGB値（0-1）に変換します。次に、正規化した各値にガンマ補正を行います。値が0.04045以下なら12.92で割り、それ以外は((value + 0.055) / 1.055) ^ 2.4の式で変換します。最後に、線形化した各チャンネルの値を重み付き係数で合成します: L = 0.2126 * R + 0.7152 * G + 0.0722 * B。
最終的なコントラスト比は(L1 + 0.05) / (L2 + 0.05)で計算します。L1は明るい方の色の相対輝度、L2は暗い方の色の相対輝度です。結果は、1:1（コントラストなし、同じ色）から21:1（最大コントラスト、純白の上の純黒）までの値になります。
主な機能
- W3C WCAG 2.1公式の輝度計算式によるコントラスト比のリアルタイム計算
- 通常テキストと大きいテキストの両方について、WCAG AAとAAAの適合レベルの合否を表示
- 前景色と背景色の両方に使えるカラーピッカーと16進数入力
- ワンクリックの色入れ替えで、前景色と背景色を逆にした組み合わせも確認
- よく使われるアクセシブルな組み合わせを含む10種類のクイックプリセット色
- 通常サイズと大きいサイズで、選んだ色がどう見えるかを確認できるライブテキストプレビュー
- 現在の組み合わせが基準を満たさない場合、基準を満たす最も近い前景色を自動で提案
- 前景色と背景色それぞれの輝度の詳細データを表示
- どんな環境でも快適に使えるダークモードに完全対応
- すべての処理はブラウザー内でローカルに実行され、外部サーバーにデータは送信されません
WCAGコントラストチェックの使い方
- 前景色を設定: カラーピッカーの四角をクリックするか、テキスト欄に16進数の値（例: #1A1A2E）を入力して、文字色（前景色）を設定します。
- 背景色を設定: 同様に、カラーピッカーまたは16進数入力で、文字の背後にある背景色を設定します。
- 結果を確認: 色を変更すると、コントラスト比と、WCAG 4つのレベルすべての合否結果がすぐに表示されます。
- ライブプレビューを確認: 下にスクロールすると、選んだ色の組み合わせで実際に描画されたテキストを、通常サイズと大きいサイズの両方で確認できます。
- 提案を適用: 組み合わせがWCAG AAを満たさない場合、推奨される前景色が表示されます。適用をクリックするとその色が使われます。
- プリセットを試す: クイックプリセットを使って、よく知られたアクセシブルな色の組み合わせや、そうでない組み合わせを試せます。
- 色を入れ替え: 色の入れ替えボタンをクリックすると、前景色と背景色が逆になります。
色のコントラストがアクセシビリティに重要な理由
世界では、男性の約12人に1人、女性の約200人に1人が何らかの色覚特性を持っています。さらに、何百万人もの人が、ロービジョン、加齢による視覚の変化、画面の反射などの一時的な状況による見えにくさを経験しています。十分な色のコントラストは、こうしたすべてのユーザーにとってウェブコンテンツをアクセシブルにする、最も効果的で分かりやすい方法の1つです。
テキストと背景のコントラスト不足は、ウェブ監査で最もよく見つかるアクセシビリティの問題の1つです。設計や開発の段階でWCAGコントラストチェックを使えば、本番公開の前にコントラストの問題を見つけて修正でき、修正コストを抑えながら、最初からアクセシビリティ関連の規制に準拠できます。
色のコントラストが良好であれば、障害のないユーザーにも利点があります。明るい日差しの下、品質の低いディスプレイ、気が散りやすい環境でも読みやすくなります。アクセシブルなデザインは、すべての人により良い体験をもたらすインクルーシブなデザインです。
よくある質問
WCAGのAAとAAAの違いは何ですか?
WCAG AAは、ほとんどのウェブサイトとアプリケーションに推奨される標準の適合レベルで、通常テキストには4.5:1以上、大きいテキストには3:1以上のコントラスト比が必要です。WCAG AAAはより厳格なレベルで、通常テキストに7:1以上、大きいテキストに4.5:1以上が必要です。AAAをすべてのコンテンツで満たせるとは限りませんが、重要なテキスト要素や、最大限の読みやすさが求められる場面では推奨されます。
WCAGでは何が大きいテキストにあたりますか?
WCAG 2.1では、大きいテキストは18ポイント以上（約24 CSSピクセル）、太字の場合は14ポイント以上（約18.66 CSSピクセル）のテキストと定義されています。大きいテキストは、サイズそのものが読みやすさにつながるため、コントラストの要件が低く設定されています。
このツールは透明度やアルファチャンネルに対応していますか?
このツールが扱うのは不透明な16進数カラー（6桁の16進コード）です。透明度のある色の場合、実際のコントラストは透過レイヤーの背後にある背景によって決まり、ページ内の位置によって変わることがあります。半透明のテキストを確認するには、まず透明な重なりが実際の背景に重なった結果の単色を計算し、その単色をここでテストしてください。
WCAGへの準拠は法的に義務付けられていますか?
多くの法域で義務付けられています。米国のADA、EUのEuropean Accessibility Act、カナダのAccessibility for Ontarians with Disabilities Act (AODA)、その他の国の同様の法律は、デジタルアクセシビリティの基準としてWCAG 2.1レベルAAを参照または採用しています。これらの要件を満たさない組織は、法的措置、罰金、評判の低下に直面する可能性があります。