コントラストチェッカー — WCAG AA/AAA判定

2色のWCAGコントラスト比を計算し、AA/AAAの合否をブラウザ内で確認できます。

🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。

コントラスト比

このツール、役に立った?タップでリアクション

このツールについて

このチェッカーは、文字色と背景色のWCAGコントラスト比を計算し、その組み合わせが通常サイズ・大きい文字のそれぞれでAA・AAAに合格するかを判定します。どちらの色を変えても比率と合否バッジがリアルタイムで更新されるため、読みやすくアクセシブルな配色をすばやく見つけられます。すべてブラウザ内で動作します。

よくある質問

WCAGに合格するには、どれくらいのコントラスト比が必要ですか?

WCAGのAAは、通常の文字で4.5:1以上、大きい文字で3:1以上を求めます。AAAではそれぞれ7:1、4.5:1です。大きい文字とはおよそ18pt(太字なら14pt)を指します。比率が高いほど、明るい場所や弱視の人を含め、誰にとっても読みやすくなります。

AAに合格すれば、デザインは完全にアクセシブルですか?

コントラストは重要な要素の1つですが、すべてではありません。AA合格は、文字が背景に対して読みやすいことを意味します。完全なアクセシビリティは、フォントサイズ・フォーカス状態・キーボード操作・代替テキストなどにも左右されるため、本ツールは手軽で信頼できるコントラスト確認としてお使いください。

入力したデータはどこかに送信されますか?

いいえ。コントラストはブラウザ内で計算されるため、テストした色がどこかに送信されることはありません。