テキスト
WCAG の色コントラストを確認する方法
文字色と背景色がある。コントラスト比を読み、その組が WCAG 2 の AA と AAA に通るか見る。白地のグレー #777777 は 4.48:1 で、通常の文字の AA にわずかに届かない。#767676 なら通る。何もこのタブから出ない。
両方の hex コードを手元にしてコントラストチェッカーを開く。本文は 4.5:1、24px 超の見出しは 3:1、アイコンや枠線は 3:1 と比べる。アップロードなし。
コントラストチェッカーを開くこの一回
しきい値を知る
WCAG 2 AA：通常の文字は 4.5:1、大きい文字は 3:1。AAA：7:1 と 4.5:1。大きい文字は 24px の標準か約 18.7px の太字。アイコン、枠線、フォーム部品は 3:1。
比率のしきい値：大きい文字と UI は 3:1、通常の文字の AA は 4.5:1、AAA は 7:1。 cv.cm のコントラストチェッカーを開く
クリーム地にピンクのサンプルが入っている。比率と合否の行は、文字見本の下の右側。アップロードなし。
コントラストチェッカーを開く二つの色を入れる
文字に #777777、背景に #ffffff のように hex を入れるか、色見本で選ぶ。#777 のような 3 桁も使える。見本は入力に合わせて変わる。
比率と行を読む
#ffffff 上の #777777 は 4.48:1：大きい文字の AA と UI は合格、通常の文字の AA は不合格。各行がしきい値に対して「合格」か「不合格」を示す。
提案の色を採る
通常の文字が AA に落ちると、黒か白の方向へ寄せて 4.5:1 に届く一番近い文字色を提案する。白地の #777777 には #767676 を提案。「入れ替え」で文字と背景が入れ替わる。
白地の #777777 は 4.48:1 で通常の文字の AA に不合格。#767676 は 4.54:1 で合格。 すべての状態を確認してコピー
リンク、ホバー、無効の色でも繰り返す。画像上の文字は画像の一番暗い部分を背景にする。「コピー」で色、比率、結果がクリップボードに入る。
よくある質問
色コントラストを無料で確認できる？
できる。cv.cm はこのタブで WCAG の比率を計算する。アップロードなし。
通常の文字に必要な比率は？
AA は 4.5:1、AAA は 7:1。大きい文字は 3:1 と 4.5:1。
大きい文字とは？
18pt（24px）以上の標準か、14pt（約 18.7px）以上の太字。
色の順番は関係ある？
ない。比率はどちらでも同じ。「入れ替え」はプレビューだけ変える。
#777777 はなぜ不合格？
白地での比率が 4.48:1 で、4.5:1 にわずかに足りない。#767676 なら 4.54:1 で合格。