カラーコントラストチェッカー
前景色と背景色を入力すると、チェッカーは WCAG コントラスト比 (1:1 ～ 21:1) に加え、通常のテキスト、大きなテキスト、非テキスト要素の WCAG 2.1 AA および AAA しきい値に対する合否判定を返します。内部では WCAG 輝度公式を使用しています。これは単純な計算ですが、アクセシビリティにとって重要です。明るさを調整して比率が必要なしきい値を超えるまで、失敗を修正します。
コントラスト比の計算方法
-
1
2色を入力してください
両方の色を3桁または6桁のHEXで入力します。それぞれにカラーピッカーが使えます。
-
2
それぞれについて計算された相対輝度
L = 0.2126・R + 0.7152・G + 0.0722・B ここで、各チャネルは sRGB から線形化されます。
-
3
コントラスト比
(L_明るい + 0.05) / (L_暗い + 0.05)。比率は 1:1 ～ 21:1 です。
-
4
合格/不合格バッジ
AA (通常の場合は 4.5:1、ラージ/UI の場合は 3:1)、AAA (通常の場合は 7:1、ラージの場合は 4.5:1)。大きなテキスト = ≥18pt の標準文字または ≥14pt の太字。
WCAG コントラストしきい値
| コンテンツタイプ | AA しきい値 | AAA しきい値 |
|---|---|---|
| 通常のテキスト | 4.5:1 | 7:1 |
| 大きなテキスト (≥18pt の標準または ≥14pt の太字) | 3:1 | 4.5:1 |
| 非テキスト (UI コンポーネント、フォーカス リング) | 3:1 | - |
| 付随的なテキスト (装飾、無効、ロゴ) | 免除 | 免除 |
「大きなテキスト」とは、18 ポイント以上の通常の太さ (CSS では約 24 ピクセル) または 14 ポイント以上の太字 (約 19 ピクセルの太字) を意味します。
対比の例
| ペア | 比率 | AA ノーマル | AA大 | AAA ノーマル |
|---|---|---|---|---|
| 白地に黒 | 21:1 | 合格 | 合格 | 合格 |
| 白地に #333 | 12.6:1 | 合格 | 合格 | 合格 |
| 白地に #666 | 5.7:1 | 合格 | 合格 | 不合格 |
| 白地に #888 | 3.5:1 | 不合格 | 合格 | 不合格 |
| 白地に #AAA | 2.3:1 | 不合格 | 不合格 | 不合格 |
| #1976D2 地に白 (マテリアルブルー 700) | 4.6:1 | 不合格 | 合格 | 不合格 |
| #2196F3 地に白 (マテリアルブルー 500) | 3.1:1 | 不合格（通常） | 合格 | 不合格 |
アクセシビリティに関する一般的な落とし穴
- 白地にグレーの本文 #999 以上は AA 不合格。白の本文テキストには #767676 以降の色を使用します。
- グレー上の青色のリンク: 両方の色が中間の輝度であるため、失敗することがよくあります。
- ブランド カラーの白いテキスト: 暗い色合い (≥ 4.5:1) は通過し、中間調のブランド カラーは不合格となります。大きなテキストまたは濃い色のブランドを使用します。
- プレースホルダー テキストは、「ヒント」のためにコントラストが低いことがよくあります。ユーザーがプレースホルダーを読む必要がある場合は、WCAG が適用されます。
- 無効状態: WCAG 2.2 では、状態自体が別の手段で伝達されない限り、コントロールの背景に対して無効なテキストに対して 3:1 が必要です。
WCAG が教えてくれないこと
- WCAG 2.x は 1988 年の公式を使用します。最新の APCA (高度知覚コントラストアルゴリズム) は、知覚される可読性をより適切に反映しますが、まだ法的なベースラインではありません。APCA およびエッジケースを処理するために、数値を WCAG 最小値をわずかに超えて引き上げます。
- アクセシビリティの要素はコントラストだけではありません。フォントが 9px だったり、行の高さが狭かったり、意味の色が赤緑だったりすると、21:1 の比率は意味がありません。
失敗したペアの改善
- 暗い背景ではより明るい前景、明るい背景ではより暗い前景。
- フォントサイズまたはウェイトを大きくします、大きなテキストのしきい値が低くなります。
- 画像上のテキストの後ろに背景を追加します (オーバーレイ、グラデーション)。
- それでも失敗するグレーにフェードアウトしてコントラストを修正しないでください、AA に達するまで押し続けてください。
調整のたびに再確認してください。ツールは比率をリアルタイムで再計算するため、明るさの小さな変更でも判定はすぐに変わります。
よくある質問
AA は、ほとんどの法域 (米国セクション 508、EU EN 301 549) の法的ベースラインであり、ほとんどの監査ツールがフラグを立てるものです。AAA は意欲的なものであり、特定のアクセシビリティコンテキスト (弱視ユーザー向けの教育コンテンツ) にのみ必要です。AAを目指して、AAAをボーナスとして扱います。
いいえ、3桁または6桁の不透明なHEX色のみ受け付けます。RGBまたはHSLは先にHEXへ変換するか、常にHEXを出力するカラーピッカーを使ってください。
WCAG 2.1 SC 1.4.11 では、非テキスト UI コンポーネントおよびグラフィックオブジェクトに対して 3:1 のコントラストが必要です。これは、フォーカスインジケーター、入力境界、アイコンのみのボタン、および状態 (ホバー、アクティブ) に適用されます。デフォルト状態とフォーカス状態の両方を確認します。
各モードを個別にテストします。明るいテーマと暗いテーマのコントラスト比は独立しています。多くのライトモードで合格するパレットは、同じ相対明度のダークモードでは失敗します。
関連ツール
ASCII表リファレンス
0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。
HTML文字参照
HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。
キーボードショートカット一覧
macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。
FPS カウンター
requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。
カラーパレットジェネレーター
基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。
バイナリからASCIIへの変換ツール
バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。