カラーアクセシビリティチェッカー

前景色と背景色（16進コード）を入力して、コントラスト比とWCAG準拠を確認してください。

色の入力

前景色

背景色

プレビューテキスト

これは大きな太字のテキストです。

これは通常サイズのテキストです。

コントラスト比

21.00:1

コントラスト比

通常のテキスト (AA)

AAA

大きなテキスト (AA)

18pt+ or 14pt+ bold

AAA

UIコンポーネント (AA)

Buttons, form controls, etc.

WCAG Accessibility Guidelines

Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1

Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1

Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image

カラーアクセシビリティチェッカーの使い方

1
2色を入力する
前景色(テキスト色)と背景色を、たとえば #1a1a1a と #ffffff のように hex コードで指定します。
2
コントラストをチェックする
「Check Accessibility」をクリックして、2色間のコントラスト比を計算します。
3
WCAG の結果を確認する
通常テキスト、大きいテキスト、UI コンポーネントの各レベルで AA と AAA の合否バッジを確認し、ライブプレビューを見ます。

4
必要に応じて調整する
色を入れ替えたり hex 値を微調整したりして、プロジェクトが求める WCAG レベルを満たす組み合わせにします。

WCAGのカラーコントラスト、その謎を解く

コントラスト比とは何を意味するのか

カラーコントラストは、2色のうち明るいほうと暗いほうの比として表され、1:1 から 21:1 の範囲を取ります。比が 1:1 ということは2色が同一であることを意味し、テキストは背景に対してまったく見えなくなります。一方、21:1 は最大値で、純粋な黒と純粋な白とのコントラストです。それ以外のすべての組み合わせは、その間のどこかに収まります。この比は、どの色を使ったかや色相がどれだけ違うかに関するものではなく、純粋に明るさの差に関するものです。だからこそ、あなたには別物に見える2色でも基準を満たさないことがあります。

このたった1つの数値が、アクセシブルな色の土台です。なぜなら、できるだけ幅広い人々と状況でテキストが読み取れるかどうかを予測するからです。チェッカーは、入力したあらゆる前景色と背景色の組み合わせについてこれを計算し、その結果を公表されているしきい値と照らし合わせます。

必ず満たすべきAAのしきい値

WCAGのレベルAAは、ほとんどのウェブサイトが目指し、多くのアクセシビリティ関連の法律や調達規則が参照する基準なので、これを自分の最低ラインとして扱ってください。AAは、通常の本文テキストに少なくとも 4.5:1、大きいテキストに少なくとも 3:1 のコントラスト比を求めます。この2つの数値が日常的なデザインの判断の大半をカバーし、このツールのバッジは、ある組み合わせがそれぞれをクリアしているかどうかをすぐに教えてくれます。

ある組み合わせが通常テキストと大きいテキストの両方でAAに合格すれば、しっかりとした、根拠のある土台が得られます。通常テキストでは不合格だが大きいテキストでは合格という場合でも使えますが、それは大きいサイズに限ってのことであり、これは後で気づくのではなく、意図的に決めておく価値のある制約です。

AAAと「大きいテキスト」の意味

レベルAAAは強化された段階で、読みやすさを最大化することを目的としており、要件を通常テキストで 7:1、大きいテキストで 4.5:1 まで引き上げます。AAAはサイト全体に求められるものではなく、ブランドのカラーパレットでは現実的でないことも多いものの、長文の読み物や重要なコンテンツ、ロービジョンの利用者には目指す価値のある目標です。チェッカーはAAと並べてAAAも報告するので、ある組み合わせにどれだけ余裕があるかが分かります。

「大きいテキスト」には、人を驚かせる厳密な定義があります。それはおおむね 18pt 以上、太字なら 14pt 以上を意味し、これは通常で約 24px、太字で約 18.66px に相当します。しきい値が低いのは、単に大きく太い字形のほうが低いコントラストでも読みやすいからです。この境界より小さいものはすべて、より厳しい通常テキストの比を満たさなければならないため、大きく見える見出しが資格を満たすと決めつけず、実際のサイズと太さを必ず確認してください。

なぜコントラストが実際の利用者にとって重要なのか

十分なコントラストは形式的なチェック項目ではありません。それは、実際の人々があなたのインターフェースを使えるかどうかを左右します。加齢とともに増えていくロービジョンの利用者はこれに直接頼っており、明るい日差しの中や、暗くて安価なディスプレイで、あるいは疲れているときに画面を読む人も同様です。コントラストは色覚特性とも関わります。比が色相ではなく明るさに基づいているため、赤と緑の差に依存した組み合わせは、それらの色相を見分けられない人には崩れてしまう一方、強い明るさの差があればそれでも読み取れます。

この最後の点には、はっきり述べる価値のある必然的な帰結があります。意味を伝えるのに色だけに頼ってはいけません。情報が低コントラストと色覚多様性の両方を切り抜けられるよう、色をテキスト、アイコン、下線、形と組み合わせてください。

コントラスト比はどのように計算されるか

バッジの背後にある計算は、相対輝度から始まります。これは各色が人間の目にどれだけ明るく見えるかを測る尺度です。それは赤・緑・青の各チャンネルの単純な平均ではありません。目は青よりも緑にはるかに敏感なため、緑が最も重く、青が最も軽く重み付けされます。また、各チャンネルは結果が生の信号ではなく知覚に沿うよう、まず小さなガンマ補正を通されます。

両方の色に輝度の値が得られると、コントラスト比は、明るいほうの輝度に小さな定数を加えたものを、暗いほうの輝度に同じ定数を加えたもので割った値になります。この定数は、黒に近い領域でも計算式が破綻しないようにします。これを手で計算する必要はありませんが、色相ではなく輝度が結果を左右すると知っていれば、単に違って見える色を選ぶだけでは不十分な理由が分かります。

テキスト以外とUIのコントラスト

コントラストのルールはテキストに限りません。WCAGは、操作可能なコンポーネントの視覚的な境界や意味のあるグラフィックにも 3:1 の最小値を定めており、チェッカーはこれをUIコンポーネントとして示します。これには、テキスト入力欄の境界線、ボタンの輪郭、チェックボックスの中のチェック、フォーカスインジケーター、そしてユーザーが理解するために知覚しなければならないアイコンやグラフの各部分が含まれます。白いカードの上の淡いグレーの入力欄の境界線は、たとえ中のラベルテキストが楽々と合格していても、このルールの典型的な不合格例です。

コントロールが周囲に対して 3:1 をクリアするよう設計するということは、人々が隣のテキストを読めるだけでなく、実際にそれを見つけて操作できるということです。テキストだけでなく、コンポーネントの縁や状態をテストしてください。

よくある不合格とその直し方

いくつかのパターンが繰り返し不合格になります。白の上の淡いグレーのプレースホルダーや補助テキストが最もよくあるもので、白の上の #999999 近辺の中間グレーのような値は 4.5:1 を下回るため、暗くする必要があります。ブランドカラーも常連の問題児で、特に本文テキストや色付きボタン上の白いテキストに使われる中間トーンの青・緑・オレンジは、組み合わせがAAにわずかに届かないことがよくあります。薄い色の背景に薄い細い境界線も、3:1 のUIしきい値を日常的に外します。

直し方はたいてい小さなものです。比が基準線をクリアするまで前景を暗くするか背景を明るくします。これはHSLで言えば、ブランドがそのまま伝わるよう色相は保ったまま、明度を控えめに調整することを意味することが多いです。にぎやかな画像やグラデーションの上のテキストには、最悪の領域でも合格するよう、背後に不透明または半透明のスクリム（覆い）を加えます。実際の色をここに入力し、比とAA・AAAのバッジが更新されるのを見ながら、プロジェクトが求めるすべてのレベルが緑になるまで値を微調整してください。

よくある質問

コントラスト比とは何で、どのくらいが良いとされますか?

コントラスト比はテキストと背景の輝度差を表す指標で、1:1 から 21:1 の範囲を取ります。WCAG は AA レベルで通常テキストに最低 4.5:1、大きいテキストに 3:1 を、より厳しい AAA レベルでは 7:1 と 4.5:1 を求めます。

AA と AAA の違いは何ですか?

AA はほとんどのウェブサイトや法的要件が目標とする標準レベルで、AAA は読みやすさを最大化する強化レベルです。チェッカーは両方の合否を表示するので、目的に合う基準を選べます。

通常テキストは不合格なのに、大きいテキストが合格になるのはなぜですか?

大きいテキスト(おおむね 18pt 以上、または 14pt の太字以上)は読みやすいため、WCAG はより低いコントラストのしきい値を認めています。そのため同じ色の組み合わせでも、大きいテキストの基準を満たしつつ通常テキストの基準を満たさないことがあります。

どの色形式で入力すればよいですか?

色は #RRGGBB 形式、または短縮の #RGB 形式の hex コードで入力します。ツールは入力を検証し、通常テキストと大きいテキストのライブプレビューを表示するので、実際の見え方を確認できます。

チェッカーは無料ですか?入力した色はどこかに送信されますか?

登録不要で完全に無料です。コントラストの計算はすべてブラウザ内で行われるため、テストした色がサーバーにアップロードされることはありません。