配色のコントラスト:ウェブアクセシビリティ

カラーユニバーサルデザインの考え方や文字の読みやすさを考えて 文字と背景の 配色デザインをするときに、自分や周りの人の感覚や意見だけに頼るのはなんだか心もとないものです。
そこで、数値で判断できる基準――W3Cの「Web Content Accessibility Guidelines(WCAG) 2.0」で定義されている「コントラスト比」を使って配色を検討してみようと思います。

コントラスト比 (contrast ratio)

コントラスト比の計算方法は、WCAG 2.0のガイドラインに示されているコントラスト比の算出方法に従いました。

(L1 + 0.05) / (L2 + 0.05)
L1 は、明るいほうの色の 相対輝度
L2 は、暗いほうの色の 相対輝度

相対輝度 (relative luminance)

相対輝度さえわかれば簡単な計算なのですが、相対輝度の求め方がちょっとややこしいのです。

最も暗い黒を0に、最も明るい白を1に正規化した色空間内の任意の点の相対的な明るさ。
sRGB色空間においては、色の相対輝度は、L = 0.2126 * R + 0.7152 * G + 0.0722 * B と定義されており、R、G 及び B は以下のように定義される:
RsRGB <= 0.03928 の場合R = RsRGB/12.92 、そうでない場合 R = ((RsRGB+0.055)/1.055) ^ 2.4
GsRGB <= 0.03928 の場合G = GsRGB/12.92 、そうでない場合 G = ((GsRGB+0.055)/1.055) ^ 2.4
BsRGB <= 0.03928 の場合B = BsRGB/12.92 、そうでない場合 B = ((BsRGB+0.055)/1.055) ^ 2.4
RsRGB、GsRGB、及び BsRGB は、次のように定義される:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255

https://waic.jp/docs/WCAG20/Overview.html#relativeluminancedef

電卓たたいてすぐに計算とはいきません、表計算ソフトのExcelを使って文字と背景の塗りつぶしの色のコントラスト比を求めるシートを作成しました。

カラーチェック用のExcelブック

ExcelのVBAも利用しているのでマクロ付きのブックとなっています。

ダウンロード

文字と背景のカラーチェック.xlsm

文字と背景のカラーチェックの使い方

文字と背景のカラーチェックはマクロ付きのブックなので、利用するにはマクロを有効にしないと使えません。よくわからないマクロを実行するなんて―という方には最後にVBAのモジュールを掲載しておきます。

ブックを開いたら文字と背景の色を指定します。

指定方法は2種類

カラーコードを16進数で入力

カラーコードで指定

カラーコード入力にある文字と背景の空欄にカラーコードを16進数の形式で入力します。
例 白:FFFFFF、黒:000000、赤:FF0000
アルファベットの大文字/小文字、全角/半角はどちらでも大丈夫(のはず)です。

カラーコードに16進数以外を入力するとエラーメッセージが表示されます。

カラーコードエラー

色を直接指定

文字と背景の色は、Excelにあるフォントと塗りつぶしの色を使っても指定できます。

フォントと塗りつぶしの色で指定

文字と背景の表示サンプルのセルを選択して、メニューにある塗りつぶしの色とフォントの色を使って指定します。

文字と背景の色をチェックする

色の指定がすんだら[文字と背景の色をチェック]のボタンをクリックします。

カラーチェック結果

カラーチェックの結果が数値と、その数値に基づいた判定も表示されます。

判定は WCAG 2.0の達成基準に従っています。
コントラスト比の達成基準は最低限基準のレベルAAとさらに高度なレベルAAAがあります。

また古い基準ですがWCAG 1.0で示されていた明度差と色差についても数値を計算して判定を行っています。

これだけでウェブアクセシビリティが向上するわけがありませんが、色使いの判断材料として使うことはできるかと思います。

付録:VBAモジュール

Sub ColorCheck()
FontColorHex = String(6, "000000")
If Range("C4").Value <> "" Then
If IsNumeric("&H" & Range("C4").Value) = False Then
GoTo reenter
End If
Range("H4").Value = StrConv(UCase(Right("000000" & Range("C4").Value, 6)), vbNarrow)
Else
fontcol = Range("D2").Font.color
hexfontcol = Right("000000" & Hex(fontcol), 6)
Mid(FontColorHex, 1) = Mid(hexfontcol, 5, 2)
Mid(FontColorHex, 3) = Mid(hexfontcol, 3, 2)
Mid(FontColorHex, 5) = Mid(hexfontcol, 1, 2)
Range("H4").Value = UCase(FontColorHex)
End If
ReadFontColHex = Range("H4").Value
Mid(FontColorHex, 1) = Mid(ReadFontColHex, 5, 2)
Mid(FontColorHex, 3) = Mid(ReadFontColHex, 3, 2)
Mid(FontColorHex, 5) = Mid(ReadFontColHex, 1, 2)
Range("D2").Font.color = CLng("&H" & FontColorHex)
Range("C4").ClearContents
BgColorHex = String(6, "000000")
If Range("C6").Value <> "" Then
If IsNumeric("&H" & Range("C6").Value) = False Then
GoTo reenter
End If
Range("H6").Value = StrConv(UCase(Right("000000" & Range("C6").Value, 6)), vbNarrow)
Else
bgcol = Range("D2").Interior.color
hexbgcol = Right("000000" & Hex(bgcol), 6)
Mid(BgColorHex, 1) = Mid(hexbgcol, 5, 2)
Mid(BgColorHex, 3) = Mid(hexbgcol, 3, 2)
Mid(BgColorHex, 5) = Mid(hexbgcol, 1, 2)
Range("H6").Value = UCase(BgColorHex)
End If
ReadBgColHex = Range("H6").Value
Mid(BgColorHex, 1) = Mid(ReadBgColHex, 5, 2)
Mid(BgColorHex, 3) = Mid(ReadBgColHex, 3, 2)
Mid(BgColorHex, 5) = Mid(ReadBgColHex, 1, 2)
Range("D2").Interior.color = CLng("&H" & BgColorHex)
Range("C6").ClearContents
cf = Right("000000" & Hex(Range("D2").Font.color), 6)
rf = Val("&H" & Mid(cf, 5, 2))
gf = Val("&H" & Mid(cf, 3, 2))
bf = Val("&H" & Mid(cf, 1, 2))
cb = Right("000000" & Hex(Range("D2").Interior.color), 6)
rb = Val("&H" & Mid(cb, 5, 2))
gb = Val("&H" & Mid(cb, 3, 2))
bb = Val("&H" & Mid(cb, 1, 2))
'明度差
Range("E9").Value = Abs((((rf - rb) * 299) + ((gf - gb) * 587) + ((bf - bb) * 114)) / 1000)
'色差
Range("E10").Value = Abs(rf - rb) + Abs(gf - gb) + Abs(bf - bb)
'相対輝度
rfsrgb = rf / 255
gfsrgb = gf / 255
bfsrgb = bf / 255
If rfsrgb <= 0.03928 Then
rfr = rfsrgb / 12.92
Else
rfr = ((rfsrgb + 0.055) / 1.055) ^ 2.4
End If
If gfsrgb <= 0.03928 Then
gfg = gfsrgb / 12.92
Else
gfg = ((gfsrgb + 0.055) / 1.055) ^ 2.4
End If
If bfsrgb <= 0.03928 Then
bfb = bfsrgb / 12.92
Else
bfb = ((bfsrgb + 0.055) / 1.055) ^ 2.4
End If
rbsrgb = rb / 255
gbsrgb = gb / 255
bbsrgb = bb / 255
If rbsrgb <= 0.03928 Then
rbr = rbsrgb / 12.92
Else
rbr = ((rbsrgb + 0.055) / 1.055) ^ 2.4
End If
If gbsrgb <= 0.03928 Then
gbg = gbsrgb / 12.92
Else
gbg = ((gbsrgb + 0.055) / 1.055) ^ 2.4
End If
If bbsrgb <= 0.03928 Then
bbb = bbsrgb / 12.92
Else
bbb = ((bbsrgb + 0.055) / 1.055) ^ 2.4
End If
lf = 0.2126 * rfr + 0.7152 * gfg + 0.0722 * bfb
lb = 0.2126 * rbr + 0.7152 * gbg + 0.0722 * bbb
'コントラスト比
If lf > lb Then
colcont = (lf + 0.05) / (lb + 0.05)
Else
colcont = (lb + 0.05) / (lf + 0.05)
End If
Range("E11").Value = colcont
Exit Sub
reenter:
MsgBox "カラーコードは16進数で入力してください"
Range("C4").ClearContents
Range("C6").ClearContents
End Sub