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

テキストと背景の色を入力するだけで、コントラスト比と WCAG 2.x の適合状況を即時確認できます。

HEX カラー入力対応。AA / AAA 適合チェック・ライブプレビュー・改善カラーの提案まで揃っています。

報告
カラー設定
プレビュー
通常テキスト — サンプル文(16px)
大きなテキスト — 見出しサンプル(24px)
太字テキスト — サブ見出しサンプル(18.67px bold)
コントラスト比
:1
1:1 3:1 4.5:1 7:1 21:1
WCAG 2.x 適合チェック
適合レベル 通常テキスト 大きなテキスト
WCAG AA
通常 4.5:1 / 大きな 3:1
WCAG AAA
通常 7:1 / 大きな 4.5:1
通常テキスト:18pt 未満または太字 14pt 未満
大きなテキスト:18pt 以上または太字 14pt 以上
改善カラーの提案
デザインのヒント
コントラスト不足は低視力のユーザーが読みにくくなるほか、強い光の下でも可読性が下がります。本文は 4.5:1 以上を目安にしましょう。
大きなテキスト(18pt 以上、または太字 14pt 以上)は要求が緩く 3:1 です。大きい文字はそれ自体が読みやすいためです。
WCAG AAA は最も厳しい基準です。重要な本文や説明テキストでは 7:1 以上を目指しましょう。
文字色と背景色を設定
左側のカラーピッカーまたは HEX 入力で指定します。ツールバーの「色を入れ替える」で前景と背景を交換したり、プリセットで素早く試せます。
プレビューとコントラスト比を確認
右側パネルにサンプル文、コントラスト比、適合ラベル、1:1〜21:1 の目盛り上の位置がリアルタイムで表示されます。
WCAG を確認して提案を適用
下の表で AA/AAA が通常テキスト・大きなテキストそれぞれで達成できるかを確認し、右の提案からワンクリックでより安全な色へ切り替えられます。
どんなときに使いますか?
Web、スライド、管理画面、アプリ画面などで文字と背景の見やすさをすぐ確認したいとき。ブランドカラーや UI 色は決まっているが、アクセシビリティ目標との整合をざっくり確かめたいときに便利です。
なぜ 4.5:1 や 7:1 がよく話題になるのですか?
4.5:1 は通常テキスト向けの WCAG AA の代表的な基準で、7:1 はより厳しい AAA の目安です。前景と背景の明るさの差を表し、一般的に数値が高いほど読みやすくなります。
大きい文字と普通の文字で基準が違うのはなぜですか?
大きい文字や太字は判別しやすいため、WCAG では大きい文字にやや低いコントラスト基準が認められています。重要な内容では、可能な限り高いコントラストを確保するのが無難です。
AA を満たせば十分でしょうか?
多くの製品では AA が実用的な基準ですが、常に十分とは限りません。情報量が多い画面や見づらい環境、低視力ユーザーが多い利用場面では AAA を目指すと安心です。
提案された色はそのまま本番に使ってよいですか?
修正の出発点としては有効ですが、実際の画面で必ず確認してください。ブランドとの整合、視覚の優先順位、hover や disabled、ダークモードなどの状態も含めて最終判断してください。
カラー理論 フロントエンド デザインツール
2026-03-22

カラーコード完全ガイド:RGB・HEX・HSL の変換原理とデザイン活用

RGB・HEX・HSL はすべて同じ色を表しますが、まったく異なる方法で記述します。本記事では各色モデルの設計思想・変換の数学・使い分けの基準から、WCAG アクセシビリティ対応まで徹底解説します。

データビジュアライゼーション グラフデザイン Y軸カット
2026-05-14

グラフも嘘をつく:Y軸の切り捨て・3D円グラフ・視覚的デザインの罠を完全解説

ちょっとした設計ミスで、5%の成長が爆発的な成長に見える。ほぼ同じ数値が雲泥の差に見える。Y軸の切り捨て、3D効果、円グラフの配置——グラフで人を誤解させる手法と、自分がグラフを作る際に避けるべき落とし穴を解説します。

色彩コントラスト アクセシビリティ WCAG
2026-04-07

色彩コントラストとアクセシビリティ:WCAG基準・コントラスト比の計算原理と改善テクニック

色彩コントラスト比はアクセシブルなWebデザインの中核指標で、弱視・色盲・一般ユーザーのさまざまな環境での読みやすさに影響します。WCAG 2.1のAA/AAAレベル・相対輝度計算公式・よくある設計ミスと修正策を解説します。

画像処理 画像圧縮 カラー空間
2026-06-04

デジタル画像処理:カラー空間と圧縮技術のパフォーマンスガイド

デジタル画像のカラーフォーマットの選択、圧縮アルゴリズムの違い、および画質とファイルサイズのバランスを取るための最適化戦略を深く掘り下げます。

カルーセル 情報ボード Carousel
2026-04-27

情報ボード完全ガイド:カルーセル展示・お知らせデザイン・イベント宣伝のビジュアルテクニック

お知らせ、イベント画像、ブランドメッセージを1つの画面にまとめたい?スライドショー型の情報ボードが最もスペース効率の高い解決策です。3つのコンテンツモード、切り替え速度の設定原則、テキスト可読性のコツ、そして無料オンラインツールで5分以内にプロ品質のボードを作る方法を解説します。

色彩心理学 色と感情 デザイン心理
2026-04-18

色彩心理学:色が感情・意思決定・行動に与える影響

色は視覚的な要素にとどまらず、私たちの感情・注意力・消費行動に直接影響します。赤が緊迫感を生み出し、青が信頼を築き、緑が健康を伝える心理的メカニズムを解説。文化による色の違いや、デザイナーが色彩心理学を活用して効果的な視覚コミュニケーションを実現する方法を紹介します。