サイトの文字色のコントラストを調べる方法｜ブラウザーだけで全要素を測る

文字色と背景色の差が小さいと、読める人と読めない人が分かれる。

この差はコントラスト比という数値で表され、計算式が決まっているため感覚ではなく数字で判断できる。

ここでは、追加のツールを入れずにブラウザーだけでページ全体を測る方法と、判定の基準を整理する。

紹介するコードは2026年9月20日に実際のサイトで実行し、出力を確認している。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

基準は2つに分かれる

WCAGではコントラスト比の下限が決められており、文字の大きさと太さによって値が変わる。

同じ色の組み合わせでも、小さい文字では足りず、大きい見出しでは足りるという状態が起こる。

そのため、ページ全体を1つの値で判断できない。

1か所だけ測る

気になる箇所が決まっているなら、ブラウザーの開発者ツールで測れる。

1. 対象の文字を右クリックして検証を選ぶ
2. スタイルの欄でcolorの色見本をクリックする
3. 開いた色の画面にコントラスト比が出る

この方法は速いが、ページ全体を見るには数が多すぎる。

ページ全体をまとめて測る

開発者ツールのコンソールで次のコードを実行すると、ページ内の文字を一通り測って低い順に並べられる。

function lum(c) {
  const m = c.match(/\d+(\.\d+)?/g).slice(0, 3).map(Number).map(v => {
    v /= 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * m[0] + 0.7152 * m[1] + 0.0722 * m[2];
}

function bg(el) {
  let e = el;
  while (e) {
    const c = getComputedStyle(e).backgroundColor;
    if (c && !/rgba\(0, 0, 0, 0\)|transparent/.test(c)) return c;
    e = e.parentElement;
  }
  return 'rgb(255,255,255)';
}

const out = [], seen = new Set();
for (const el of document.querySelectorAll('p,a,li,h1,h2,h3,span,button,time,small')) {
  if (!el.offsetParent || !el.textContent.trim()) continue;
  const cs = getComputedStyle(el);
  const px = parseFloat(cs.fontSize) || 16;
  const key = cs.color + '|' + bg(el) + '|' + px + '|' + cs.fontWeight;
  if (seen.has(key)) continue;
  seen.add(key);
  const l1 = lum(cs.color), l2 = lum(bg(el));
  const r = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
  const large = px >= 24 || (px >= 18.66 && parseInt(cs.fontWeight) >= 700);
  out.push({
    ratio: Math.round(r * 100) / 100,
    need: large ? 3 : 4.5,
    ok: r >= (large ? 3 : 4.5),
    px, w: cs.fontWeight, color: cs.color, bg: bg(el),
    tag: el.tagName, text: el.textContent.trim().slice(0, 20)
  });
}
out.sort((a, b) => a.ratio - b.ratio);
console.table(out.filter(x => !x.ok));

同じ色と大きさの組み合わせは1件にまとめているため、件数はページ内の見た目の種類の数になる。

最後の行を console.table(out) に変えると、足りている分も含めて全部出る。

このコードが見ているもの

• 画面に出ていない要素は飛ばす（offsetParentで判定）
• 背景色が透明なら、親をたどって最初に見つかった色を使う
• どこにも色が無ければ白とみなす
• 24px以上、または18.66px以上の太字を大きい文字として扱う

背景に画像やグラデーションを使っている箇所は、この方法では正しく測れない。

その場合は、実際の見た目から色を拾って1か所ずつ確かめる。

実際に測って出た値

運用しているサイトで実行したところ、次のような結果になった。

本文の色は十分な差があった一方で、ピンクの背景に白文字を置いた箇所が2.64と低く出た。

この組み合わせは、色が目立つため見えていると感じやすいが、数値では足りていない。

目立つことと読みやすいことは別なので、装飾に使う色ほど測る価値がある。

測れない値が出ることがある

実測では、比が1.00という値も出た。

これは背景色が半透明で、その後ろの色が計算に入っていないために起きる。

半透明の背景は、重なっている色まで計算しないと正しい値にならない。

1.00や極端に低い値が出たときは、まず半透明かどうかを疑う。

足りないときの直し方

比を上げる方法は、色を変えるか、文字の条件を変えるかに分かれる。

ブランドの色を変えたくない場合、文字を大きくして基準の側を下げる手もある。

ただし小さい文字のまま色だけ薄くすると、条件はより厳しくなる。

測った結果を残しておく

配色は少しずつ変わるため、測った日と値を残しておくと比べられる。

• 測った日
• 足りていなかった組み合わせの数
• いちばん低かった比と、その色の組み合わせ
• 直したあとの比

テーマを更新したあとに同じコードを流せば、増えていないかを確かめられる。

まとめ

• 基準は通常の文字で4.5対1、大きい文字で3対1に分かれる
• 24px以上、または18.66px以上の太字が大きい文字にあたる
• 開発者ツールのコンソールで、ページ全体をまとめて測れる
• 実測では、ピンク背景に白文字の組み合わせが2.64と低く出た
• 比が1.00のような値が出たら、背景が半透明かどうかを疑う
• 色を変えずに、文字を大きくして基準側を下げる方法もある

この記事のコードは2026年9月20日に実際のサイトで実行し、出力を確認したものである。

コントラスト比の基準はW3CのWCAG 2.1に定義がある。

サイトの実装まわりはWAZAのまとめにも置いている。