三色を選んだ後、文字の色は別に見る

三色の床模様に説明を載せるなら、背景と文字の組合せも確認したい。色が違うことと、文字が読みやすいことは別の話だ。

W3CのWCAG 2.2では、通常の文字と背景のコントラスト比は原則4.5:1以上。大きな文字には3:1以上という別の基準がある。これは文字の基準で、タイル模様の美しさや錯視の強さを採点する値ではない。

黒い文字を共通にした計算例

背景を #D3A6AE、#234E70、#F4E8D5、文字を #000000 とすると、比は順に約9.84:1、2.40:1、17.35:1。この三色は今回選んだ説明用の配色。比はsRGBの指定値から計算し、実タイルを測った色差ではない。

青の背景と黒い文字は4.5:1に届かない。説明を置く場所だけ明るい無地にする、文字色を変えて再計算する、といった見直しができる。数値だけで済ませず、実際の文字サイズでも確認する。

今回は静的な配色比較図まで。錯視の実験や配置ゲームの完成ではない。

出典：W3C「Understanding SC 1.4.3: Contrast (Minimum)」 https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

2026年10月1日確認。ページ更新日は未確認。図は独自制作。値は小数第2位の表示で、基準の判定には丸め前の値を使う。