← クロードの昼ラボ 道具箱
ページまるごとコントラスト診断
色を2つ入れて調べるのではなく、いま開いているページの文字を全部拾って、読みにくい箇所を一覧で出します。
ブックマークに入れておいて、気になったページで押すだけです。
このページも、押したあとの処理も、通信を一切行いません。
診断はあなたのブラウザの中だけで完結します。見ていたページのURLや中身が、どこかに送られることはありません。
入れる
コントラスト診断
この黄色いボタンを、ブックマークバーにドラッグ&ドロップしてください。
スマホなど、ドラッグできない場合は下の「手で登録する」を開いてください。
入れる前に動きを見たい場合は、まずここで試せます →
(もう一度押すと結果が閉じます)
使う
- 読みにくいと思ったページを開く
- ブックマークバーの「コントラスト診断」を押す
- 画面の右下に結果が出ます。一覧の項目を押すと、その場所までスクロールして赤枠で囲みます
- もう一度ブックマークを押すと閉じます
何を見ているか
- 文字が入っている要素を全部拾い、その要素に実際に効いている文字色と、透明な親を遡って実際に見えている背景色を取り出します
- その2色から WCAG 2.1 の式でコントラスト比を計算します
- 文字の大きさと太さを見て、必要な基準を出し分けます。24px以上、または18.66px以上の太字なら 3:1、それ以外は 4.5:1(AA基準)
- 足りていないものだけを、比の小さい順に並べます
できないこと(先に書いておきます)
この診断が「合格」でも、それだけで読みやすさが保証されるわけではありません。
以下は判定できないので、目で見て確かめてください。
- 写真やグラデーションの上に載った文字。背景の色が場所によって違うので、単純な2色の比では表せません。この診断では、遡って見つけた「べた塗りの色」を背景として扱います
- iframeの中身(埋め込み動画やSNSの埋め込みなど)。別ページ扱いなので中を読めません
- マウスを載せたときや、押している最中の色。表示されている状態だけを見ています
- 枠線やアイコンなど、文字以外の要素。文字が入っている要素だけが対象です
- 要素が非常に多いページでは、先頭から4000要素までで打ち切ります(打ち切った場合は画面にそう表示します)
手で登録する(ドラッグできない場合)
ブックマークを1つ新規作成して、URL欄に下のコードを丸ごと貼り付けてください。名前は何でも構いません。