QuickATools

開発者ツール · Free browser tool

WCAG 色コントラストチェッカー

テキストと背景の色コントラスト比をリアルタイムで確認。アクセシブルな Web デザイン向けに WCAG 2.1 AA・AAA 準拠を即座に検証します。

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

WCAG 2.1 が実際に求めるコントラスト比は？

WCAG 2.1 達成基準 1.4.3（コントラスト（最低限））は Level AA で通常テキスト最低 4.5:1、大きいテキスト 3:1 を要求します。Level AAA（1.4.6 コントラスト（高度））は通常テキスト 7:1、大きいテキスト 4.5:1 に引き上げます。比は各色の相対輝度から計算され、1:1（同色）から 21:1（純白上の純黒）までです。

AA と AAA の実務的な違いは？

AA は公共サイト・行政サービス・商用プロダクトで最も一般的な準拠目標で、可読性とデザインの柔軟性のバランスです。AAA は長文の読書体験や大きなロービジョンのオーディエンスなど、最大可読性が必要なときのより厳しい強化レベルです。すべての UI 要素に AAA を当てるのはしばしば非現実的なので、多くのチームは全体を AA、重要な本文を AAA にします。

WCAG で「大きいテキスト」とは何ですか？

大きいテキストは、通常の太さで最低 18 ポイント（だいたい ~24px）、または太字で最低 14 ポイント（だいたい ~18.66px）と定義されます。見出しやヒーローコピーは該当しやすく、本文段落は通常該当しません。大きいグリフは弱いコントラストでも読めるため閾値が低くなりますが、デザインファイルではなく CSS の実際のレンダリングサイズを確認すべきです。

アクセシビリティで色コントラストがそれほど重要なのはなぜ？

低コントラストは最もよくあるアクセシビリティ失敗のひとつです。ロービジョンのユーザー、高齢者、暗い画面や日差しで白んだ画面の人、多くの色覚多様性のある人がテキストを読むには、色相だけでなく十分な輝度差に依存します。早めにコントラストを確認すれば、理想条件では洗練されて見えても実際の訪問者の多くには使えない UI を出荷するのを防げます。

あわせて使いたいツール

セラー・クリエイター・プロ向けの、ほかの無料ブラウザツールをチェック。

アクセシブルなインターフェースで色コントラストが妥協できない理由

バリアフリーデザインは「あったらよい」仕上げではなく、ロービジョン・色覚多様性・強い屋外のまぶしさでも UI を読めるようにする方法です。WCAG 2.1 はテキストとその背景の最小コントラスト比を定め、はるかに広いユーザーにコンテンツが読めるようにします。その閾値を落とすと、校正済みモニターのデザイナーには問題なく見えるフォーム・ドキュメント・ダッシュボード・マーケティングページから、人が静かに排除されます。

行政サイト・エンタープライズ製品・多くのグローバル消費者アプリは、少なくとも WCAG AA を満たすことが期待されます。仕様が使うのと同じ相対輝度の式でブラウザ内でコントラストを確認すれば、ブランド色を第三者サービスにアップロードせずに出荷前のパレット判断を検証できます。テキストと背景を入れ替え、大きい／通常テキストをプレビューし、組み合わせが通ったらチームにパレットリンクを共有してください。

AA は通常テキスト 4.5:1・大きいテキスト 3:1、AAA は 7:1・4.5:1 です。大きいテキストは一般に 18pt（約 24px）通常、または 14pt（約 18.66px）太字です。デザインレビューの速いゲートとしてこのツールを使い、最終 UI を文脈で確認してください——アイコン・グラデーション・オーバーレイは、2つの平らなヘックスが通っても実効コントラストを変え得ます。

このサイトの他の開発者ユーティリティ: 正規表現テスターでフォームパターンを検証、JWT デコーダーで認証トークンを検査、JSON フォーマッター・バリデーターでデザイントークン JSON を整え、Base64 エンコード/デコードでアセットをエンコード。マーケットプレイス商品写真では、商品写真背景チェッカーが同じ輝度計算を実画像に再利用します。