🫰

CSS: 文字色が「最低限のコントラストに関する達成基準」を満たすためのメモ

に公開
CSS
アクセシビリティ
WCAG
color
tech

こなさんみんばんわ。

…というフレーズで始まるブログ記事を投稿している Web サイトの主です。涙
こちらに何か書くのは初めてになります[1]。

今回はとりあえずテストで、昔ちょっと書いたまま放置していたメモ書きを公開してみることにします。題材はタイトルの通りで、今でいう WCAG 2.2 の達成基準 1.4.3（最低限のコントラスト）を満たすためには、文字サイズが何ピクセル以上であれば 3:1 のコントラスト比でも問題ないかを理解するために、当時（どうやら8年くらい前の模様）調べた内容をまとめたものです。

https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html

基本

テキスト（及び画像化された文字）とその背景の間に、少なくとも 4.5:1 以上のコントラスト比をもたせる。
ただし、次に述べる「大きなテキスト」の場合は、少なくとも 3:1 以上のコントラスト比があればよい、となっている。

「大きなテキスト」の定義

  • 18ポイント以上のテキスト もしくは
  • 14ポイント以上の太字のテキスト

以上は欧文フォントの場合で、CJK フォント（漢字など）の場合、

  • 22ポイント以上のテキスト もしくは
  • 18ポイント以上の太字のテキスト

が、欧文フォントの基準と「同等の文字サイズ」とされている。

CSS ピクセル基準で考える

少なくとも CSS 2.1 以上においては、1ポイント = 1.33333… CSS ピクセルであるので[2]、

  • 欧文フォントの場合
    • 24px 以上のテキスト もしくは
    • 19px 以上の太字のテキスト
  • CJK フォントの場合
    • 30px 以上のテキスト もしくは
    • 24px 以上の太字のテキスト

以上が、前景色と背景色のコントラスト比が 4.5:1 以下であっても、3:1 以上であれば問題のないフォントサイズとなります。

以上です。
書式も含めて基本的に当時のメモ書きそのままコピペですが、Zenn の Markdown 記法が説明リスト (dl,dt,dd) の書式に非対応だったので、そこだけ単なる箇条書き (ul,li) に変更しました。

あと「1ポイント = 1.3333… CSS ピクセル」の部分には出典が必要かと思いましたので、脚註の形で追加しております。編集部分はそれくらいです。

そんな訳で

テスト投稿でした。

ちなみに、もし普通にブログ書くより反応がいいようであれば、もう自分のサイトは音楽系の内容中心にして、技術系の記事はこちらに書いていくようにしょうかなぁ…などとも少し考えておりますので、もしそうなった場合はよろしくお願い申し上げます。

本日はここまで。

脚注

  1. できた頃にアカウントだけは作ってたんですが、今の今まで一切何もせず放置してました😅 ↩︎

  2. CSS 2.1 仕様書の §4.3.2 Lengths にて “1px is equal to 0.75pt“ とされています。ちなみにいわゆる CSS3 以降の仕様書では “1px = 1/96th of 1in” と定義されるようになりますが、単に言い回しが変わっただけで数値的には同内容です。 ↩︎

Discussion