カラーコントラスト比チェッカー（WCAG）

文字の色

背景の色

コントラスト比

基準	必要な比	判定
AA：通常の文字	4.5 : 1
AA：大きな文字（24px以上、または太字で約18.7px以上）	3 : 1
AAA：通常の文字	7 : 1
AAA：大きな文字	4.5 : 1
AA：アイコン・ボタンの枠など（非テキスト）	3 : 1

見え方

大きな文字の見本（24px・太字）

通常の文字の見本です。本文はこのくらいの大きさで読まれます（16px）。

小さな文字の見本（13px）。注意書きなどに使われる大きさです。

検索ボタン

合格する色の提案

色合い（色相・彩度）はそのままに、明るさだけを変えて、AA（4.5:1）と AAA（7:1）に合格する色を探します。「使う」で、その色に切り替わります。

色の組み合わせの例

入力した色はブラウザの中だけで計算され、外部のサーバーには送信されません。

使い方

説明

Webサイトやアプリの文字色と背景色が、読みやすいコントラストになっているかを、アクセシビリティの国際基準 WCAG 2.1 で確かめるツールです。

AA（多くの国や企業で求められる水準）と AAA（より厳しい水準）の合否をその場で表示し、合格しない場合は、近い色合いで合格する色を提案します。

操作の手順

「文字の色」と「背景の色」に、色コード（#1E3C72 のようなHEX、または rgb(30, 60, 114)）を入力するか、色の選択ボタンで選びます
コントラスト比と、AA・AAA（通常の文字・大きな文字・アイコンなど）ごとの合否が、すぐに表示されます
「見え方」で、実際の文字の大きさでの読みやすさを確かめられます
不合格のときは「合格する色の提案」に、文字の色・背景の色をそれぞれ調整した候補が出ます。「使う」で切り替え、コピーボタンで色コードをコピーできます
入れ替えボタンで文字と背景の色を入れ替えられます。最後に使った色は、この端末のブラウザに保存されます

計算方法

WCAG 2.1 の定義どおり、色を相対輝度（人の目が感じる明るさ）に直し、(明るい色の輝度 + 0.05) ÷ (暗い色の輝度 + 0.05) でコントラスト比を求めます（1:1〜21:1）
合否は、計算した値そのもので判定します。表示は小数第3位以下を切り捨てるため、4.499… は「4.49」と表示され、4.5:1 には届かない扱いになります
提案は、元の色の色相・彩度を保ったまま、明るさを暗くする方向・明るくする方向の両方で探し、変化が小さいほうを出します

ご注意

透明度（アルファ値）を含む色には対応していません。半透明の色は、実際に重なって見える色に直してから入力してください
WCAG のコントラスト比は、読みやすさの目安の一つです。文字の太さ・フォント・色覚の多様性なども合わせて確かめることをおすすめします
「大きな文字」は、WCAG の定義で 18ポイント（約24px）以上、または太字の 14ポイント（約18.7px）以上の文字です

← トップに戻る

豆知識・背景知識

WCAG（Web Content Accessibility Guidelines）は、Webの標準化団体 W3C が定めたアクセシビリティの国際的なガイドラインです。コントラスト比の基準は「達成基準 1.4.3（AA）」と「1.4.6（AAA）」で定められていて、通常の文字は 4.5:1 以上（AAA は 7:1 以上）が求められます。

アメリカの ADA（障害を持つアメリカ人法）に関する訴訟や、EU の欧州アクセシビリティ法（2025年6月から適用）など、海外ではWebのアクセシビリティ対応が法律で求められる場面が増えています。日本でも2024年4月から、事業者による障害のある人への「合理的配慮の提供」が義務になりました。

灰色の文字を白い背景に置くとき、AA に合格する最も明るい灰色は #767676（約4.54:1）です。デザインでよく使われる #777777 は約4.48:1 で、わずかに届きません。見た目ではほとんど区別できない差でも、基準では合否が分かれます。

みんなの声・ご意見ボックス

「カラーコントラスト比チェッカー」について、感想・使いにくいところ・欲しい機能などを気軽に教えてください。

まだ投稿がありません。最初の一言をお待ちしています！

お名前（任意）

評価（任意）

コメント必須

投稿された内容はこのページに公開されます。個人情報や連絡先は書かないでください。宣伝・URLを含む投稿は自動的に非表示になります。

利用にお金はかかりますか？会員登録は必要ですか？

すべて無料でお使いいただけます。会員登録やログインも必要ありません。

入力した内容はサーバーに送られていますか？

計算やツールの処理は、お使いのブラウザの中だけで行っています。入力された数値や画像がサーバーへ送られることはありません。
コメント欄に投稿された内容だけは、他の方にも読んでいただくためにサーバーへ保存されます。

スマホやタブレットでも使えますか？

iPhone・iPad・Android のブラウザに対応しています。画面の幅に合わせて表示が切り替わります。

要望やバグを見つけたときはどこへ伝えればよいですか？

「投稿する」タブからお知らせください。いただいた内容は運営で確認し、改善の参考にさせていただきます。