HOME( takamiya.com TOP) > STUDY > INTERNET >

背景色と文字色のコントラスト

◆いきさつ

Another HTML-lint gatewayさんでHTMLのチェックをして戴いた所、
ART の time.html の背景色と文字色の組み合わせが不十分だとOKが貰えず。。。
どういう色なら良いのか試行錯誤の結果、ある程度の見当がついたので、後日の参考の為に記す。

Another HTML-lint gateway さんが採用なさってる計算式のサイト。
https://htmllint.itc.keio.ac.jp/htmllint/explain.html

◆色盲の方や、白黒環境でご覧の方の為の色の組み合わせ

背景色と文字のコントラストの計算式
(Techniques For Accessibility Evaluation And Repair Tools にある方法)

(@Rb*299+@Gb*587+@Bb*144)/1000=@明b:
(@Rf*299+@Gf*587+@Bf*144)/1000=@明f:
ABS[@明b-@明f]=@明差:
ABS[@Rb-@Rf]+ABS[@Gb-@Gf]+ABS[@Bb-@Bf]=@色差:

明度差としては、125以上有れば充分。
色差としては、500以上有れば充分。
と考えられるらしい。

例えば、

黒を背景色とした時。
黒(#000000)のRGB値は、R=0 G=0 B=0 である為
黒の明度(明b)( 0x299 + 0x587 + 0x144 )÷ 1000 = 0

白を文字色として選んだ時、
白(#FFFFFF)のRGB値は、R=255 G=255 B=255 である為
白の明度(明f)( 255x299 + 255x587 + 255x144 )÷ 1000 = 263

ABS[@明b-@明f]= 263 となり、
※ 263 は 125 以上なので、充分明度差が有ると見なす。

ABS[0-255]+ABS[0-255]+ABS[0-255]= 765
※ 765 は 500 以上なので、充分色差が有ると見なす。

しかし、その条件さえ満たしていれば良いわけでもなく、
更に、WEBセーフカラーを使うのが無難なのだろう。

◆組み合わせ方のコツ

不足部分も多々有ろうとは思うが、現在の私の感触として、
背景色の R+G+B の値が
214 以下(例 0 107 107)または 705 以上(例 255:225:225)の場合に、比較的当てはめ易いように思う。
しかし、中間色の 215 〜 704 を背景にしたら、難しくなるかも?

また、黒背景に対する文字色は、結構色々当てはめ可能だが、 どの色でも明差・色差が取れるわけでは無い。
特に、中間色に近づくほどに、使える色は少なくなる。

しかし、ある程度サイトとしての統一を計りたい時。
●濃い色の背景色の時
非リンク…白 未訪問リンク…水色 既訪問リンク…黄色 アクセス中…ピンク
●薄い色の背景色の時
非リンク…黒 未訪問リンク…紺色 既訪問リンク…緑色 アクセス中…赤
なら判りやすいかも?と思った。

また、個人的な嗜好の問題かもしれないが、
白背景に、BOLD でない文字の 009900の緑は、若干色が薄く量によっては疲れる。
例えば、006600の緑のほうが文字としては見易いが、黒と似すぎているかも?
両者の間に位置する色、例えば007700の緑や、008000の緑なら、文字として見易く、黒との違いも判るが、WEBセーフカラーでは無く、どうなのか?
009900の緑の場合に、太字にするか。。。
006600の緑の場合にアンダーラインを付ければ、良いかも知れない。
つまり、色差が100の代より、200の代のほうが見易いような気がする?


背景色コード Rb Gb Bb明b文字色コードRfGf Bf明f明差色差
0000000000FFFFFF 255 255255263 263 765
0000000000黄色FFFF99 255 255153248 248 663
0000000000水色99FFFF 153 255255232 232 663
0000000000ピンクFF99FF 255 153255203 203 663
0000000000薄緑99FF99 153 255153217 217 561
0000000000薄紺9999FF 153 153255172 172 561
0000000000薄赤FF9999 255 153153188 188 561
0000000000薄橙FFCC99 255 204153218 218 612
0000000000水色99CCFF 153 204255202 202 612
0000000000薄紫CC99FF 204 153255188 188 612
グレー333333 51 51 51 53FFFFFF 255 255255263 210 612
グレー333333 51 51 51 53 黄色FFFF99 255 255153248 195 510
グレー333333 51 51 51 53水色99FFFF 153 255255232 179 510
グレー333333 51 51 51 53ピンクFF99FF 255 153255203 150 510
グレー474747 71 71 71 73FFFFFF 255 255255263 190 552
グレー474747 71 71 71 73黄色FFFFCC 255 255204255 182 501
グレー474747 71 71 71 73水色CCFFFF 204 255255247 174 501
グレー474747 71 71 71 73ピンクFFCCFF 255 204255233 160 501
オリーブ6666001021020 90FFFFFF 255 255255263 173 561
オリーブ6666001021020 90黄色FFFFCC 255 255204255 165 510
オリーブ6666001021020 90水色CCFFFF 204 255255247 157 510
オリーブ6666001021020 90薄紺E1E1FF 225 225255236 146 501
オリーブ6666001021020 90ピンクFFCCFF 255 204255233 143 510
99000015300 46FFFFFF 255 255255263 217 612
99000015300 46黄色FFFF99 255 255153248 202 510
99000015300 46薄緑CCFFCC 204 255204240 194 510
99000015300 46水色99FFFF 153 255255232 186 510
99000015300 46薄紺CCCCFF 204 204255217 171 510
99000015300 46ピンクFF99FF 255 153255203 157 510
99000015300 46薄橙FFCCCC 255 204204225 179 510

背景色コード Rb Gb Bb明b文字色コードRfGf Bf明f明差色差
FFFFFF255255255263000000 0 000 263 765
FFFFFF255255255263000066 0 0102 15 248 663
FFFFFF255255255263660000 102 00 30 233 663
FFFFFF255255255263006600 0 1020 60 203 663
FFFFFF255255255263000099 0 0153 22 241 612
FFFFFF255255255263990000 153 00 46 217 612
FFFFFF255255255263009900 0 1530 90 173 612
FFFFFF2552552552630000CC 0 0204 29 234 561
FFFFFF255255255263CC0000 204 00 61 202 561
FFFFFF25525525526300CC00 0 2040120 143 561
ピンクFFCCFF255204255233000000 0 000 233 714
ピンクFFCCFF255204255233009900 0 1530 90 143 561
ピンクFFCCFF2552042552330000CC 0 0204 29 204 510
ピンクFFCCFF255204255233CC0000 204 00 61 172 510
薄緑CCFFCC204225204222000000 0 000 222 633
薄緑CCFFCC204225204222006600 0 1020 60 162 531
薄緑CCFFCC204225204222000066 0 0102 15 207 531
薄緑CCFFCC204225204222660000 102 00 30 192 531

to TOP