白背景・黒背景でも「コントラスト比4.5:1」を確保できる色の例

背景色の候補

• white （＝ #fff ）
• black （＝ #000 ）

どの背景色候補にも コントラスト比4.5:1 を確保できる色の例

• (グレースケール上) #767676
• (Rのみ) #ee0000
• (RGのみ) #7a7a00
• (Gのみ) #008800
• (GBのみ) #006cff
• (BRのみ) #d000d0

※「Bのみ」の色では、どの背景色候補でも コントラスト比4.5:1 を確保できる色を見つけられず。

コントラスト比の確保確認に用いた、ありがたい資料・ツール

• waic.jp - WCAG2.0 解説書 : 1.4.3 コントラスト (最低限)
• HEX Contrast Ratio Calculator

参考

前述のツール 「HEX Contrast Ratio Calculator」 で試すための、カラーセット連想配列：

[
{"front":"#767676","back":"#ffffff"},
{"front":"#767676","back":"#000000"},
{"front":"#ee0000","back":"#ffffff"},
{"front":"#ee0000","back":"#000000"},
{"front":"#7a7a00","back":"#ffffff"},
{"front":"#7a7a00","back":"#000000"},
{"front":"#008800","back":"#ffffff"},
{"front":"#008800","back":"#000000"},
{"front":"#006cff","back":"#ffffff"},
{"front":"#006cff","back":"#000000"},
{"front":"#d000d0","back":"#ffffff"},
{"front":"#d000d0","back":"#000000"}
]

[eof]