コントラスト比を確認する
2色を選ぶと、比率、AA・AAAへの適合、そして実際の見え方が分かります。低コントラストで読みづらくなりやすい日本語のサンプルも含みます。
- すべてブラウザ内で処理
- オフライン対応
- アップロードなし
- 登録不要
- 透かしなし
ツールを読み込み中…
使い方
- 文字色と背景色を選ぶか、16進値を貼り付けます。
- 比率と4つの判定を読みます。
- 本文が4.5:1を超えるまで調整します。
アップロードが不要な理由
このページの処理はすべて、ブラウザのタブ内で動くコードが行います。ファイルはディスクからタブのメモリに読み込まれ、その場で変換され、ダウンロードとして書き出されます。当社にも第三者にも送信されません。
ご自身で確認する方法
- ブラウザの開発者ツール（F12）を開き、「ネットワーク」タブを選びます。
- ファイルを読み込んでツールを実行します。
- 表示されるのはツール自身のコードの読み込みだけで、キャッシュ後は通信そのものがありません。
よくある質問
どの基準が該当しますか？
通常の本文は4.5:1、24px以上（太字なら19px以上）の文字と入力欄の枠・アイコンなどのUI部品は3:1、AAAは7:1です。1つだけ覚えるなら4.5です。
基準は満たしているのに読みにくいのですが。
コントラスト比は太さ・サイズ・字間を評価しません。細く明るい書体の4.5:1は実際に読みづらいものです。数値だけでなく目でも判断できるようプレビューを置いています。特に日本語は、小さいサイズの密な漢字が式の要求以上のコントラストを必要とします。