コントラストチェッカー — WCAGアクセシビリティコントラスト比率ツール（無料）

色はデザインにおいて最も強力なツールの一つですが、同時に排除的な要因にもなり得ます。美しいカラーパレットは、ユーザーがテキストを読めない場合では意味がありません。ウェブ上では、不十分なコントラストが最も一般的なアクセシビリティの失敗であり、色覚障害を持つ3億人以上の人々に影響を与え、明るい日光下でモバイルデバイスを使用する人や、輝度が低下した年齢とともに老化的な画面を使用する多くの人々にも影響を与えています。私たちの無料のコントラストチェッカーは、任意の2つの色の間のコントラスト比率を瞬時に計算し、WCAG AAおよびAAA基準に対する位置を正確に示します。これにより、推測することなくインクルーシブなデザインが可能になります。

色のコントラストとは何か、なぜ重要なのか？

色のコントラストとは、2つの色の間の感知された明るさの違いです。テキストが背景に配置されている場合、そのコントラストがテキストの読みやすさを決定します。色の明るさが非常に似ている場合、それらは混ざり合い、低視力や色覚障害を持つ人、または直射日光下で画面を凝視しているユーザーにとって見えなくなってしまいます。

ウェブコンテンツアクセシビリティガイドライン（WCAG）では、相対輝度 — 人間の目にとって色がどのくらい明るく見えるかを測定する指標 — を用いて数学的にコントラストを定義しています。この式は、私たちの目が赤や青よりも緑の光に対してより敏感であるという事実を考慮しています。同じRGB値の明るさを持つ明るい緑と明るい赤では、緑の方が人間の目に明るく見えるため、WCAGの式はこの点を補正し、人間の知覚を正確に反映したコントラスト比率を算出します。

比率は1:1（同じ色、コントラストなし）から21:1（純黒と純白、最大のコントラスト）まで変化します。最もアクセシブルなデザインはその中間にあることが多いです。WCAG AAでは通常のテキストの最小比率は4.5:1、7:1がより厳しいAAA基準です。これらは恣意的な数値ではなく、さまざまな視覚障害を持つ人が実際に区別できる範囲に基づいています。

アクセシビリティ以外にも、コントラストはすべての人に影響を与えます。高コントラストのデザインは、小さな画面、明るい環境、40歳以上で自然にコントラスト感度が低下するユーザーにとって読みやすくなります。低コントラストのテキストはデザイナーの校正済みモニターではエレガントに見えるかもしれませんが、予算の安いノートPC、割れたスマートフォンの画面、または明るい部屋のプロジェクターでは読みにくくなります。

コントラストチェッカーの使い方

色の組み合わせをテストするには数秒で済みます。2つの色を選択し、即座の判断を得ましょう。

1. 前景色を選択します。これは通常テキストの色です。色スワッチをクリックしてネイティブのピッカーを開くか、入力フィールドに直接HEXコードを入力してください。
2. 背景色を選択します。これはテキストの背後にある表面です。同じピッカーを使用するか、HEXコードを手動で入力してください。
3. コントラスト比率を確認します。ツールは7.23:1などの正確な比率を明確に表示し、あなたの位置を正確に示します。
4. WCAG適合性を確認します。結果の表は以下の適合/不適合状態を示します：
   • 通常のテキスト（WCAG AA（4.5:1）およびAAA（7:1））
   • 大文字（WCAG AA（3:1）およびAAA（4.5:1））
   • UIコンポーネント（WCAG AA（3:1））
5. 文脈に応じた色のプレビューを確認します。ツールは選択した組み合わせで通常のテキストと大見出しテキストをレンダリングし、実際の読みやすさを視覚的に判断できます。
6. 色を交換して逆の組み合わせ（明るいテキストを暗い背景に）をテストします。交換ボタンをクリックしてください。
7. 比率をクリップボードにコピーして、ドキュメントやデザインシステムのメモに使用できます。

全体のプロセスは瞬時に完了します。どちらかの色を調整すると、比率、適合性表、プレビューがリアルタイムで更新されます。

コントラスト比率の理解

レシオ範囲	アクセシビリティレベル	意味
1:1 から 2.99:1	すべての基準に適合しない	テキストが背景とほぼ区別できず、読みやすいコンテンツには不適
3:1 から 4.49:1	大文字とUIのみAAに適合	大きな見出し（18pt以上）、ボタン、アイコン、境界線に適しているが、本文テキストでは不適合
4.5:1 から 6.99:1	すべてのテキストにAAに適合	通常の本文テキストの最小基準を満たし、ほとんどのユーザーにとって読みやすい
7:1 から 21:1	通常のテキストにAAAに適合	アクセシビリティが向上し、視覚障害が大きいユーザーにとって読みやすく、長文コンテンツに最適

「大文字」とは何か？

WCAGでは、18ポイント（24ピクセル）以上、または14ポイント太字（約18.67ピクセル太字）以上の文字を「大文字」と定義しています。見出し、CTAボタン、ヒーローテキストは通常大文字として分類され、本文テキストよりも低いコントラスト比率で通過できます。しかし、どこでも少なくとも4.5:1を目指すことはベストプラクティスです。これは一貫性を保ち、リサイズやズームによるデザインの将来性を確保するためです。

なぜ式が相対輝度を使用するのか

WCAGのコントラスト式は単純なRGB値の比較ではありません。まず、各色を相対輝度に変換します。これは、人間の目が緑の光に対して赤や青よりも敏感であるため、緑をより重視する測定値です。このため、RGBで同じ明るさ値を持つ純赤（#FF0000）と純緑（#00FF00）は非常に異なるコントラスト比率を生み出します。緑は人間の目に明るく見えるため、相対輝度は高いです。

主な機能

機能	何をするか	なぜ重要なのか
リアルタイムコントラスト計算	色を調整するたびにWCAG比率を即座に計算	パレットのオプションを試しながら、適合性が即座に更新される
WCAG AA & AAAテスト	通常のテキスト、大文字、UIコンポーネントの両方のレベルで適合/不適合を表示	閾値を覚える必要なく、どの基準に適合しているかを正確に把握できる
ライブテキストプレビュー	サンプル本文テキストと大見出しテキストをあなたの色でレンダリング	数学的にだけでなく視覚的に読みやすさを判断できる
色交換	1クリックで前景と背景を逆転	明るいテキストを暗い背景に、またはその逆を即座にテストできる
HEX入力	デザインシステムから正確なブランドカラーをマッチさせるために直接HEXコードを受け入れる
比率コピー	コントラスト比率をクリップボードにコピー	デザイン仕様や監査でアクセシビリティ適合性を記録する
プライバシー第一	すべての計算がブラウザ内で行われる	どのサーバーにもデザインデータが送信されない

基本的なコントラストツールが単なる数値を表示するのに対し、このチェッカーは比率を文脈に合わせて示します。4.2:1というスコアだけでなく、本文テキストではAAに適合しないが、大文字では通過するという、実際的な情報を提供します。これにより、テキストを暗くするか、フォントサイズを大きくするかを判断するのに役立ちます。

実際の使用例

アクセシブルなインターフェースを作成するウェブデザイナー デザイナーがダークなネイビーの背景と明るいグレーのテキストを持つランディングページを作成しています。自分のモニターではエレガントに見えますが、コントラストチェッカーでは3.8:1という比率が表示され、本文テキストではAAに適合していません。デザイナーはテキストをわずかに明るくし、4.6:1に達成し、視覚障害を持つユーザーにも読みやすく、ダークな美学を犠牲にすることなくページを読みやすくしました。

デザインシステムを実装する開発者 開発者が数十のカラートークンを持つコンポーネントライブラリを管理しています。新しいテーマをリリースする前に、すべてのテキストと背景のペアをコントラストチェッカーでテストします。早期に失敗を検出することで、アクセシビリティのバグが本番環境に到達するのを防ぎ、監査後にコンポーネントを再設計するコストを回避できます。

ドキュメントをフォーマットするコンテンツクリエイター マーケターが色付きのコールアウトボックスとハイライトされたテキストを持つPDFガイドを作成しています。コントラストチェッカーを使用して、すべての背景上のすべてのテキスト色がWCAG AAに適合していることを確認します。これにより、HTMLに変換されたときやスクリーンリーダーで読み取られたときにPDFがアクセシブルになり、組織がアクセシビリティに関する苦情を回避できます。

アクセシビリティ監査を実施する製品マネージャー PMがVPAT（Voluntary Product Accessibility Template）のレビューを準備しています。アプリケーション内のすべての色の組み合わせをWCAG基準に照らしてコントラストチェッカーでテストし、それぞれの比率を記録します。これにより、適切な対応と適合性を示す監査トレースが作成されます。

学習資料を作成する教育者 教師がスライド、クイズ、読む資料を含むオンラインコースを作成しています。視覚障害を持つ学生が平等に参加できるように、すべてのテキストと背景の組み合わせをチェックします。高コントラストは、さまざまな照明条件下でスマートフォンやタブレットで講義を視聴する学生にもメリットがあります。

モバイルアプリデザイナー モバイル画面はあらゆる場所で見られます — 外で日光下、室内で蛍光灯下、ベッドでナイトモードが有効な場所など。コントラストチェッカーは、明るさが低く、画面が汚れていたり、アンチグレアフィルターが適用されている場合でも、組み合わせが十分に読みやすいことを保証するため、これらの変数条件を考慮するのに役立ちます。

ヒントとベストプラクティス

• 可能な限りAAAを目指してください。多くの地域ではAAが法的な最低基準ですが、AAAはすべてのユーザーにとってより良い体験を提供します。ブランドカラーが7:1で衝突しない場合、それらを使用してください。わずかな視覚的なトレードオフは、大きなアクセシビリティの利益に値します。
• 色だけに頼らないでください。完璧なコントラストでも、色はすべての人にアクセス可能ではありません。色覚障害を持つユーザーは赤と緑を区別できない場合があります。常に色をアイコン、ラベル、パターン、またはテキストと組み合わせて意味を伝える必要があります。
• あなたのパレット全体をテストしてください。デザインシステムには10のテキストカラーと10の背景カラーがある場合があります。これは100の可能な組み合わせです。すべてのペアを系統的にテストするか、少なくとも最も一般的なものをテストすることで、アクセシビリティの失敗が潜んでいるのを防ぎます。
• フォーカス状態とインタラクティブ要素をチェックしてください。ボタン、リンク、フォームフィールド、トグルは、周囲の領域に対して少なくとも3:1のコントラストが必要です。テキストとして通過するボタンが、UIコンポーネントとして通過しない場合もあります（境界線が微妙すぎる場合）。
• 透明度とオーバーレイを考慮してください。テキストが画像や半透明のオーバーレイ上にある場合、有効な背景は色のブレンドになります。コントラストチェッカーは固色をテストするため、オーバーレイの場合にはまずブレンド結果を計算するか、または保守的なテストを行ってください。
• ズームレベルでテストしてください。低視力のユーザーは200％以上のズームを使用します。高ズームではテキストが大きくなりますが、相対的なコントラストは同じです。ズームによっても耐えられる強力な比率を確保してください。
• 比率を記録してください。色のペアを確定した際、そのコントラスト比率をデザインシステムのドキュメントに記録してください。これにより、製品が進化するにつれて、将来的なデザイナーと開発者がアクセシビリティを維持できるようになります。

よくある質問

コントラストチェッカーは無料ですか？

はい。コントラストチェッカーは、使用制限なし、登録不要、広告なしで完全無料です。必要なだけの色の組み合わせをテストできます。

WCAGとは何ですか？

WCAGはWeb Content Accessibility Guidelines（ウェブコンテンツアクセシビリティガイドライン）の略です。W3Cが発行した国際的に認められた基準で、障害を持つ人々にウェブコンテンツをアクセス可能にする方法を定義しています。現在のバージョンはWCAG 2.1で、WCAG 2.2には追加の基準が含まれています。ガイドラインは3つのレベルに分類されています：A（最低限）、AA（標準）、AAA（強化）。

WCAG AAに適合するためのコントラスト比率は？

通常のテキスト（18pt未満または14pt太字）では4.5:1以上が必要です。大文字（18pt以上、または14pt太字以上）およびUIコンポーネント（ボタンやフォームフィールドなど）では3:1以上が必要です。

WCAG AAとAAAの違いは？

AAは、米国のSection 508やヨーロッパのアクセシビリティ法など、世界中の多くのアクセシビリティ法やガイドラインで要求される標準的な適合レベルです。AAAは、アクセシビリティをさらに向上させる強化レベルですが、どこでも必須ではありません。一部では一般ウェブコンテンツに対して過剰に厳格とされることがあります。AAAでは、通常のテキストは7:1、大文字は4.5:1のコントラストが必要です。

RGBまたはHSLの色をテストできますか？

ツールはHEX色入力を直接受け入れます。RGBまたはHSL値をお持ちの場合、まずカラーピッカーツールを使用してHEXに変換してください。HEXコードをコントラストチェッカーに入力し、即座にテストできます。

このツールはモバイルデバイスで動作しますか？

はい。コントラストチェッカーは完全にレスポンシブで、スマートフォンやタブレットでも動作します。カラーピッカー、プレビューテキスト、結果の表はすべてタッチスクリーンや小さな画面に最適化されています。

このツールは印刷デザインに使用できますか？

WCAGはデジタルコンテンツのために設計されていますが、コントラストの原則は印刷にも適用されます。4.5:1以上の比率は、印刷物のテキストが読みやすくなることを保証します。ただし、印刷デザイナーはデジタルのコントラスト比率に加えて、インクのカバレッジ、紙の品質、視認距離も考慮する必要があります。

ブランドカラーがWCAGに適合しない場合どうなりますか？

ブランドカラーが必要な比率に達しない場合、いくつかの選択肢があります。テキストをわずかに明るくまたは暗くしてください。フォントサイズを大きくしてテキストが「大文字」として分類されるようにし、必要な比率を下げてください。テキストシャドウやアウトラインを追加して、感知されたコントラストを高めます。または、非適合の色を装飾的な要素にのみ使用し、機能的なテキストにはアクセシブルな代替色を選択してください。