コントラスト比のチェック方法｜文字と背景を測り、修正前後を記録する

Web制作で文字を少し濃くしたとき、その変更をどう説明すればよいでしょうか。『前より読みやすそう』だけでは、確認した条件を次の人がたどれません。コントラスト比のチェックは、文字と背景の指定を一組にして、修正前後を比べるための手掛かりになります。本稿では架空の案内カードを使い、対象の切り分け、色値の記録、計算、修正案、未確認の引き継ぎまでを練習します。

チェックする対象を、文字・背景・状態の組に分ける

コントラスト比を調べるとき、最初にするのは色を濃くすることではありません。どの文字を、どの背景の上で、どの状態のときに確認するかを決めます。ページ全体を眺めて『少し薄い気がする』と感じることは入口になりますが、その印象だけでは修正する場所を特定できません。まず一つの案内カードを選び、見出し、説明文、日付、注記、リンク、ボタンのラベルを別々の対象として書き出してみましょう。似た灰色でも、役割や背景が違えば別の確認です。

ここでは架空の『週末の制作相談会』という案内カードを教材にします。白い背景に見出しと説明文があり、日付の注記と青い申込ボタンが並ぶ設定です。実在する依頼者のページではなく、受注実績を紹介するものでもありません。主要な演習は、十六 CSS ピクセルの通常本文、不透明な文字、単色の白背景という条件に絞ります。実ページを調べた結果ではなく、指定した色の組を数式で比較する練習だと分けて読み進めてください。

対象を区別するため、説明文を『本文一』、日付を『注記一』、申込ボタンの文字を『ボタン文字一』と名付けます。実務では要素を探し直せる名称にしておくと便利です。『灰色の文字』だけでは、同じページにある別の注記と混ざります。ページ名、カード名、文言の一部、状態を一緒に記録すれば、色を変更したあとも同じ箇所へ戻れます。細かい技術識別子が分からない段階でも、まず人が探せる説明を残すことから始められます。

文字の前景色と、その直後ろにある背景色を一組として扱います。画面の外側が白くても、文字が載るカードの背景が薄い青なら、その青との比較が必要です。透明なカードが写真の上に重なっている場合は、単色の白と決めつけられません。今回の教材の条件から外れるものは、急いで数値を埋めず『背景を特定してから測る』と残します。対象を少なくすることと、分からない対象をなかったことにするのは別です。

状態の違いも、対象を分ける理由になります。通常のボタンと、ポインターを重ねたボタンでは背景が変わることがあります。キーボードで選ばれた状態、入力エラーが出た状態、明るい表示と暗い表示も同じとは限りません。最初の一覧では、実際に確認した通常状態と、まだ見ていない状態を分けます。通常状態で得た一つの比率を、名前だけ変えて他の状態へ流用しないようにしましょう。

作業の優先順位は、読み取れないと利用者が困る情報から考えられます。架空カードなら、相談会の説明、開催日時、申込先が先です。飾りの色選びを長く続けている間に、日時が読みにくいまま残るのは避けたいところです。ただし、重要だから基準を緩めるという意味ではありません。どの対象から確認するかを決めるための順序です。台帳に優先順を付けると、時間が足りないときも未確認の場所が具体的に残ります。

『確認対象に含めるか』で迷ったものは、迷った理由も一行書きます。たとえば写真の中の看板、ロゴ、操作できない状態の部品は、通常本文とまったく同じ分類で判断できるとは限りません。見た目が薄いから装飾と呼ぶ、修正しにくいから対象外にする、といった逆向きの判断は避けます。今回の本文演習はこの分類判断を済ませた普通の文章だけを扱い、例外の認定をするための教材にはしません。

練習を始める前に、架空カードの完成形を文章でメモしておく方法もあります。『白い一枚のカードに、説明文、日時、申込ボタンがある。今回直すのは説明文の文字色だけ』と書けば、別の場所まで変更が広がったときに気付けます。色の確認から始めたはずなのに、いつの間にか文言や写真を入れ替えていると、何が結果に影響したかが分からなくなります。最初の作業範囲を紙一枚に収め、対象を増やすときは追加理由を残しましょう。

使う基準と色の値をそろえ、測定前の記録を作る

本稿の通常本文の比較では、WCAG の文字コントラストに関する達成基準を参考に、四・五対一を判定の境界にします。これはこの演習で選んだ通常文字の条件です。大型文字には別の扱いがありますが、日本語などの文字体系や書体を含め、見かけのサイズだけで安易に切り替えません。『二十四ピクセルと書いてあれば必ず大型扱い』という短縮ルールは使わず、教材では通常本文の条件を保ったまま色を直します。

先に台帳の判定欄へ『通常本文・四・五対一』と書くと、測定結果を見たあとで都合のよい分類へ変えてしまうのを防げます。サイズを大きくして別の文字に変える方法も、設計としてはあり得ます。しかしその場合は色だけの修正ではなく、配置や折り返しを含む変更です。今回の練習では文章の役割とサイズを固定して、前景色だけを変えたときに何が違うかを比較します。条件を固定するほど、変更理由が明瞭になります。

色値を取得する際は、指定された元の値と、画面から拾った見た目の値を混ぜないようにします。文字の輪郭には滑らかに見せる処理が入り、中央と縁で色が違って見える場合があります。その縁の一点を拾った値を、そのまま文字の指定色だと記録すると、元の設定と別の組を測ることになります。公式の説明では、評価時に元のスタイルなどから得られる前景色と背景色を参照する考え方が示されています。実際の表示が未確認なら、その点は別に残します。

架空カードの色は、本文を #777777、背景を #FFFFFF とします。いずれも六桁の十六進表記で、三つの色成分を表しています。台帳では先頭の記号を含める形に統一すると、文章中の番号と区別しやすくなります。『グレー』や『白っぽい色』という呼び名は補助としては使えますが、再計算するための情報には足りません。色名の印象ではなく、具体的な値を保存することが今回の作業の土台です。

同じ色値に見えても、透明度、重なり、色空間が変わると、今回の単純な前提のままでは扱えないことがあります。教材は不透明な sRGB の単色同士です。実案件で半透明の文字や重なった背景を見つけたら、色値だけを抜き出して済ませず、どう合成されるかを確認する必要があります。分からないまま白背景へ置き換えて計算するより、『不透明な単色として確定できない』と記録するほうが、次の担当に正しい課題を渡せます。

計測前のメモには、対象名、状態、前景色、背景色、文字サイズと太さ、値の取得元、確認日を入れます。取得元は、設計ファイルの指定、実装のスタイル、依頼者が渡した一覧など、後から探せる単位で書きます。教材の場合は『本稿の架空指定』です。まだ実装されていない色を測るなら、それを本番の実表示検査と呼ばないようにします。値を決めた人と実装した人が違う現場ほど、この一言が役立ちます。

目安の数字を満たしたという記録は、その色対の指定条件についての記録です。細い書体、読みにくい文章、過密な行間、拡大したときの欠けなどが、それだけで解消するわけではありません。ここで数値の役割を小さく見積もる必要はありませんが、役割を広げすぎないことが重要です。色の比較と、実装後の読み取りや操作の確認を別の欄に置けば、一つの確認結果を尊重しながら残件も見失わずに済みます。

表が収まらない場合は横にスクロールして確認してください。色値と数値は架空教材の指定条件です。

WebAIM Contrast Checkerで単色の組み合わせを調べる

色対の確認には、WebAIM が公開している Contrast Checker を利用できます。公式ページには前景色と背景色の入力欄があり、通常文字、大型文字、図形や操作部品の結果を分けて見る構成が案内されています。本稿ではその説明と入力欄の存在を確認していますが、ブラウザーで値を入力して計測を実行した記録はありません。後で示す例の数値は、同じ考え方の数式をローカルで計算した値です。ツールを操作した実測報告としては扱わないでください。

1. 読者が試すときは、まず公式ページを開き、前景色を入れる欄と背景色を入れる欄を区別します。
2. 教材なら前景に #777777、背景に #FFFFFF を指定する組から始めます。
3. 色の欄に記号があらかじめ表示されている場合は、入力後に意図した六桁の値になっているかを確かめます。
4. 貼り付けたつもりで末尾が欠けていたり、前の値が残っていたりすると、計算が正しくても別の組の結果になってしまいます。

入力直後は、比率だけを見る前に、二つの色値を台帳と照らし合わせます。この確認を飛ばすと、良い結果が出たことに安心して入力違いを見逃しがちです。今回は通常本文の練習なので、通常文字に対応する結果を見ます。大型文字や図形の欄に別の結果があっても、教材の分類を変更する理由にはしません。先に決めた条件と、実際に読んだ結果の欄が対応しているかを最後までそろえます。

結果を記録するときは、ツール名、確認日、前景色、背景色、対象分類を一緒に残します。スクリーンショットだけを残す場合も、どの対象のどの状態なのかが分からないと後で使いにくくなります。今回の台帳なら『本文一・通常』という対象名と結び付けます。仕事の画面に個人情報や未公開の依頼内容が写っているなら、そのまま共有する必要はありません。色対と結果を文字で記録するだけでも、再確認のための情報を整理できます。

1. 修正案を作るときも、元の値を消してから入力し直すのではなく、元の組を台帳に保存してから新しい組へ進みます。
2. たとえば前景色を #595959 に変えるなら、背景は白のまま据え置き、前景だけを変更したと分かるようにします。
3. スライダーを使って候補を探す方法もありますが、最終的に採用する値を読み取って記録しなければ、別の人が同じ色を再現できません。
4. 見た目の調整と採用値の確定を一続きにしましょう。

• ツールの結果と手元の計算が違うときは、まず入力条件を比較します。
• 前景と背景の値、透明度、入力桁数、見ている結果の分類を順番に確認します。
• 違いが残るなら、片方を正しいと決めつけず、値と条件を保存して調査対象にします。
• 表示の丸め方が違うだけなのか、そもそも計算した組が違うのかを切り分けることが先です。
• 今回のように境界に近い色では、見た目の短い表示だけで照合しないよう注意が必要です。

公式ツールには追加の使い方も案内されていますが、この演習で拡張機能やブックマークレットを導入する必要はありません。依頼者のページの URL や画面全体を外部へ送る手順も要りません。最初は公開可能な架空の二色だけで入力と記録の流れを練習できます。仕事の情報を扱う前に、必要な範囲だけを取り出して確認する習慣を付けると、確認作業の目的も説明しやすくなります。

ツールが動かない場合は、比率をゼロや合格へ置き換えず、入力確認までできたのか、結果表示までできたのかを分けて残します。公式ページは JavaScript を必要とする旨を示していますが、環境の問題を理由に保護機能を無断で解除する必要はありません。自分に許可された環境で再確認するか、指定色の静的計算を別の方法として明示します。別の方法で得た結果を、使えなかったツールの実行結果に書き換えないことが大切です。

架空の案内カードで、修正前後の数値を比べる

ここからは架空カードの説明文を直す練習です。変更前の指定は、通常本文十六 CSS ピクセル、前景 #777777、背景 #FFFFFF、不透明な単色です。W3C の sRGB の相対輝度の定義に沿って Python で静的に計算すると、比率は 4.478089453577215 対一になりました。この条件では四・五対一に届きません。画面を実際に描画して測った結果ではなく、指定値から求めた結果です。

計算では、色の各成分を零から一の範囲へ直し、定義に沿って線形化した値から相対輝度を求めます。その後、明るい側の相対輝度に〇・〇五を加えた値を、暗い側に同じ値を加えたもので割ります。自分で実装することがこの練習の必須条件ではありません。大切なのは、比率が『色名の印象』ではなく、入力した二つの値と定義に基づく量だと理解することです。別紙には入力と計算結果を残しています。

修正候補は、前景だけを #595959 へ変え、背景と文字サイズをそのままにします。計算結果は 7.004729208035935 対一です。通常本文の四・五対一という今回の境界を上回ります。ここでの変更理由は『本文の指定色の組に余裕を持たせるため』です。数字が大きいことだけを理由に、すべての文章をこの灰色へ一括変更する提案ではありません。まず一つの対象で、役割を保ちながら修正前後を比較します。

もう一つの候補として #767676 と白を計算すると、4.542224959605253 対一です。今回の条件では境界を上回りますが、#777777 から少し変えただけで余裕が大きくなったとはいえません。この違いは、境界の周辺を理解するための例です。最小限の変更を選ぶか、より暗い候補を選ぶかは、文字の役割や全体の設計と合わせて考えます。境界すれすれの値を『必ず最適な配色』として採用する必要はありません。

架空カードの注記一には #767676 を仮指定し、説明文とは別の行で記録します。注記の比率が境界を上回ることと、日付の文章が小さすぎないことは同じ確認ではありません。今回の数値演習では注記も通常本文の条件に固定しますが、実案件でサイズや太さが違うなら、その値を取り直します。『注記だから薄くしてよい』ではなく、意味を持つ文字として対象を特定し、何を確認したかを説明する形にします。

申込ボタンの文字については、白の前景と #005A9C の背景を例にします。静的計算では 7.136725946213922 対一です。この数値から言えるのは、指定した二色の文字コントラストについての結果です。ボタンが周囲から区別できるか、フォーカスが見えるか、押したあとに何が起こるかは別です。文字の結果をボタン全体の合格へ広げないよう、台帳の対象名を『ボタン』ではなく『ボタン文字一』としています。

別の青として #0077CC を背景にした白文字も計算すると、4.655641075418743 対一になります。通常状態とポインターを重ねた状態で色が変わる設計なら、それぞれの組を別々に確認する必要があることを示す例にできます。ただし、この教材では実際に状態切替を実装していません。二つの指定値を計算したことと、ブラウザー上で状態が正しく切り替わったことを分けて記録し、後者は未確認のままにします。

修正後の行には、前景を変更した日と、背景やサイズを変更していないことも書きます。別の担当が後から背景をクリーム色へ変えた場合、以前の白との比率はそのまま使えません。数値だけを保存していると、何が変わったら再計算が必要なのかが見えにくくなります。変更していない条件を含めて記録すれば、再チェックのきっかけが明確になります。色対の台帳は、合格印を並べるためではなく、条件の変化を追うための道具です。

1. 演習の答え合わせでは、計算値を暗記するより、同じ入力から同じ判定へ戻れるかを見ます。
2. いったん台帳を閉じ、本文一の対象条件を読み直して、前景と背景を書き出してください。
3. その二色から変更前の結果をたどり、次に変更したのが前景だけであることを確認します。
4. 数値が合っていても、対象名や背景が別のものなら、この練習の記録としては不十分です。
5. 比率の正確さと、対象への結び付けを二段階で確認することがポイントです。

表が収まらない場合は横にスクロールして確認してください。色値と数値は架空教材の指定条件です。

ボタン・画像背景・色だけの表示は、別の確認として残す

通常本文の二色を測れたら、次に確認範囲の外側を整理します。たとえば白い文字と青いボタン背景の組を測っても、そのボタンの境界や状態の視覚的な手掛かりまで調べたことにはなりません。WCAG の非テキストのコントラストでは、部品や状態を識別するために必要な視覚情報などを、隣接する色との関係で扱います。今回の文字の台帳に結果を足すだけで済ませず、何を識別するための部分なのかを別に考えます。

非テキストの確認に三対一という値が登場するからといって、すべての枠線に同じ試験を機械的に課すわけではありません。どの視覚情報が部品の識別に必要かという前提があります。架空カードであれば、ボタン背景と周囲、選択状態の印、入力欄の境界などを候補として列挙し、対象の役割を確認するところまでを別の作業にします。本文の比率だけを測った時点では、この確認が終わったとは書きません。

写真の上に文字が載る場合は、背景が一つの色ではなくなります。写真の暗い部分だけを拾って良い数値を得ても、明るい部分へ文字が重なると条件が変わる可能性があります。表示幅で写真が切り取られる位置が変わる場合も、同じ一点の値だけでは足りません。今回の単色演習をそのまま写真背景の合格判定へ使わず、画像の表示範囲と文字の位置を含めた別の確認が必要だと残します。

グラデーションや半透明の重なりにも、同じ注意が必要です。指定された色の一部を取り出しただけで、実際に文字の後ろに見える色と一致するとは限りません。修正案として単色の下地を設けることを検討する場合も、見た目や配置を含む設計変更です。担当の承認範囲を確かめ、変更前の表示を残してから進めます。本稿は複雑な背景の採取方法を検証したものではないため、そのような対象を数値済みとして扱いません。

色だけに意味を持たせていないかも、別の観点です。入力間違いを赤くしただけ、完了した項目を緑にしただけでは、色の違いを読み取りにくい人に意味が伝わらない場合があります。W3C は、情報や操作の指示などを色だけに頼らせない考え方を示しています。架空カードに申込エラーを追加するなら、色を濃くするだけでなく、何が起きたかを説明する文字などを検討します。この検討は、赤い文字の比率を測る作業とは分けます。

自分の台帳にも、この考え方を適用できます。合格を緑、不合格を赤、未確認を黄色に塗るだけでなく、文字で状態を書きます。『条件内で基準以上』『修正候補あり』『背景の特定待ち』など、次に何をするかが分かる表現にすると引き継ぎやすくなります。色分けは一覧を眺める助けになりますが、それだけを情報にしないようにしましょう。印刷や白黒表示になったときにも、状態の違いが残ります。

リンクの確認も、本文と同じ色対を測るだけでは終わらないことがあります。リンクだと分かる手掛かり、状態による変化、操作したときの見え方などが関わるためです。今回の練習でリンク文字を測定対象に追加するなら、どの背景との文字コントラストを調べたのかを明記します。それ以外を未確認として残すことは、作業の失敗ではありません。担当外の観点まで完了と書かないための整理です。

画像の代替テキストやキーボード操作など、色以外にも確認すべき項目があります。色対のチェック表に全部を詰め込むと、一つの結果の意味が曖昧になります。別の確認表へ分け、関連する項目への参照を残すとよいでしょう。画像の役割に応じた代替テキストの考え方は、別記事で扱っています。色の計測とその作業を混同せず、それぞれの確認範囲を見える状態にすることが、納品前の見落としを減らす土台になります。

画像の意味に合わせて代替テキストを考える手順は、画像のaltを役割から整理する記事で確認できます。

測った範囲と未確認を分け、再チェックできる形で渡す

最後に、結果を受け取る人が同じ対象を再確認できるかを点検します。架空カードの本文一であれば、変更前と変更後の色、白背景という条件、通常本文という分類、計算方法、結果、変更理由が一続きで読める状態にします。『コントラスト対応済み』という一言だけでは、どの文字をどう直したのかが分かりません。修正作業を説明する言葉は短くても構いませんが、対象と範囲は省かないようにします。

実際に実装を担当する人は、採用された値が保存されたかを別途確認します。設計上の色を変えたつもりでも、別のスタイルで上書きされている場合や、一部のカードだけ古い値が残る場合が考えられます。本稿ではその実装検査を行っていません。台帳には『採用案』『実装反映』『表示確認』を分ける欄を設け、確認できた工程だけを埋めます。案の承認だけで表示まで一致したとしないことが大切です。

再チェックの条件は、前景色や背景色を変えたときだけではありません。文字の役割、サイズ、太さ、透明度、背景画像、表示状態の設計が変わった場合にも、元の確認がそのまま使えるかを見直します。今回の台帳では、何が変わったら確認をやり直すかを一行で残します。たとえば『本文色、カード背景、状態切替を変更したら再確認』です。担当が替わったあとも、過去の数値を無条件に使い続けるのを防げます。

依頼者へ渡す情報は、作業の判断に必要な範囲に絞ります。色対一覧、修正案、確認方法、残件があれば、小さな改善の説明としては十分なことがあります。長い専門用語の一覧を添えても、どこを直してほしいのか伝わらなければ役立ちません。一方で、未確認の項目を省いて見栄えだけを整えるのも避けます。『この三組は指定値を確認済み、写真背景と操作状態は別途確認』のように、終わったことと次の一手を隣に置きます。

副業の作業として取り組むなら、確認する範囲を依頼内容と合わせることも必要です。既存の配色を自由に変えてよいのか、候補を出すだけなのか、実装まで含むのかによって、成果物は変わります。この練習で身に付けるのは、数値を根拠に小さな修正案を説明し、確認できていない部分を正確に渡す姿勢です。収入や案件獲得を保証する手順ではありません。制作全体の学習は、Webデザインの基礎を整理した別記事と組み合わせて進められます。

• 終了前には、台帳の空欄を見直します。
• 空欄が測定漏れなのか、対象外なのか、次の担当の確認待ちなのかを書き分けます。
• たとえば実装未反映なら『未反映のため表示確認未実施』と理由を残します。
• そうすれば、次の人は最初から調査をやり直すのではなく、必要な工程から再開できます。
• 担当名を入れる場合も、確認予定の人と、実際に確認した人を同じ意味で書かないようにしましょう。

第三者に確認を頼むときは、自分が決めた結論だけでなく、入力の組と判断条件を渡します。相手にはまず対象名と色値を照合してもらい、そのあと計算結果と判定を見てもらうと、同じ思い込みを繰り返しにくくなります。担当者が同じ計算を繰り返したことは再計算、別の人が別途確かめたことは独立確認として区別します。確認者の名前を先に書いた段階で、検品が終わった扱いにはしません。

学習全体の道筋を整理したい場合は、Webデザインを独学するための基礎ガイドも参考にしてください。

参照資料（2026年10月15日確認）：W3C：文字コントラスト、W3C：非テキストのコントラスト、W3C：色の使用、W3C：相対輝度の定義、WebAIM：Contrast Checker。公式基準の全文翻訳ではなく、対象を限定した独自の演習です。