◆いきさつ |
Another HTML-lint gatewayさんでHTMLのチェックをして戴いた所、 https://htmllint.itc.keio.ac.jp/htmllint/explain.html |
◆色盲の方や、白黒環境でご覧の方の為の色の組み合わせ |
背景色と文字のコントラストの計算式
(@Rb*299+@Gb*587+@Bb*144)/1000=@明b:
明度差としては、125以上有れば充分。
黒を背景色とした時。
白を文字色として選んだ時、 ※ 263 は 125 以上なので、充分明度差が有ると見なす。
ABS[0-255]+ABS[0-255]+ABS[0-255]= 765 更に、WEBセーフカラーを使うのが無難なのだろう。 |
◆組み合わせ方のコツ |
不足部分も多々有ろうとは思うが、現在の私の感触として、
また、黒背景に対する文字色は、結構色々当てはめ可能だが、
どの色でも明差・色差が取れるわけでは無い。
しかし、ある程度サイトとしての統一を計りたい時。 |
また、個人的な嗜好の問題かもしれないが、 |
背景色 | コード | Rb | Gb | Bb | 明b | 文字色 | コード | Rf | Gf | Bf | 明f | 明差 | 色差 |
黒 | 000000 | 0 | 0 | 0 | 0 | 白 | FFFFFF | 255 | 255 | 255 | 263 | 263 | 765 |
黒 | 000000 | 0 | 0 | 0 | 0 | 黄色 | FFFF99 | 255 | 255 | 153 | 248 | 248 | 663 |
黒 | 000000 | 0 | 0 | 0 | 0 | 水色 | 99FFFF | 153 | 255 | 255 | 232 | 232 | 663 |
黒 | 000000 | 0 | 0 | 0 | 0 | ピンク | FF99FF | 255 | 153 | 255 | 203 | 203 | 663 |
黒 | 000000 | 0 | 0 | 0 | 0 | 薄緑 | 99FF99 | 153 | 255 | 153 | 217 | 217 | 561 |
黒 | 000000 | 0 | 0 | 0 | 0 | 薄紺 | 9999FF | 153 | 153 | 255 | 172 | 172 | 561 |
黒 | 000000 | 0 | 0 | 0 | 0 | 薄赤 | FF9999 | 255 | 153 | 153 | 188 | 188 | 561 |
黒 | 000000 | 0 | 0 | 0 | 0 | 薄橙 | FFCC99 | 255 | 204 | 153 | 218 | 218 | 612 |
黒 | 000000 | 0 | 0 | 0 | 0 | 水色 | 99CCFF | 153 | 204 | 255 | 202 | 202 | 612 |
黒 | 000000 | 0 | 0 | 0 | 0 | 薄紫 | CC99FF | 204 | 153 | 255 | 188 | 188 | 612 |
グレー | 333333 | 51 | 51 | 51 | 53 | 白 | FFFFFF | 255 | 255 | 255 | 263 | 210 | 612 |
グレー | 333333 | 51 | 51 | 51 | 53 | 黄色 | FFFF99 | 255 | 255 | 153 | 248 | 195 | 510 |
グレー | 333333 | 51 | 51 | 51 | 53 | 水色 | 99FFFF | 153 | 255 | 255 | 232 | 179 | 510 |
グレー | 333333 | 51 | 51 | 51 | 53 | ピンク | FF99FF | 255 | 153 | 255 | 203 | 150 | 510 |
グレー | 474747 | 71 | 71 | 71 | 73 | 白 | FFFFFF | 255 | 255 | 255 | 263 | 190 | 552 |
グレー | 474747 | 71 | 71 | 71 | 73 | 黄色 | FFFFCC | 255 | 255 | 204 | 255 | 182 | 501 |
グレー | 474747 | 71 | 71 | 71 | 73 | 水色 | CCFFFF | 204 | 255 | 255 | 247 | 174 | 501 |
グレー | 474747 | 71 | 71 | 71 | 73 | ピンク | FFCCFF | 255 | 204 | 255 | 233 | 160 | 501 |
オリーブ | 666600 | 102 | 102 | 0 | 90 | 白 | FFFFFF | 255 | 255 | 255 | 263 | 173 | 561 |
オリーブ | 666600 | 102 | 102 | 0 | 90 | 黄色 | FFFFCC | 255 | 255 | 204 | 255 | 165 | 510 |
オリーブ | 666600 | 102 | 102 | 0 | 90 | 水色 | CCFFFF | 204 | 255 | 255 | 247 | 157 | 510 |
オリーブ | 666600 | 102 | 102 | 0 | 90 | 薄紺 | E1E1FF | 225 | 225 | 255 | 236 | 146 | 501 |
オリーブ | 666600 | 102 | 102 | 0 | 90 | ピンク | FFCCFF | 255 | 204 | 255 | 233 | 143 | 510 |
赤 | 990000 | 153 | 0 | 0 | 46 | 白 | FFFFFF | 255 | 255 | 255 | 263 | 217 | 612 |
赤 | 990000 | 153 | 0 | 0 | 46 | 黄色 | FFFF99 | 255 | 255 | 153 | 248 | 202 | 510 |
赤 | 990000 | 153 | 0 | 0 | 46 | 薄緑 | CCFFCC | 204 | 255 | 204 | 240 | 194 | 510 |
赤 | 990000 | 153 | 0 | 0 | 46 | 水色 | 99FFFF | 153 | 255 | 255 | 232 | 186 | 510 |
赤 | 990000 | 153 | 0 | 0 | 46 | 薄紺 | CCCCFF | 204 | 204 | 255 | 217 | 171 | 510 |
赤 | 990000 | 153 | 0 | 0 | 46 | ピンク | FF99FF | 255 | 153 | 255 | 203 | 157 | 510 |
赤 | 990000 | 153 | 0 | 0 | 46 | 薄橙 | FFCCCC | 255 | 204 | 204 | 225 | 179 | 510 |
背景色 | コード | Rb | Gb | Bb | 明b | 文字色 | コード | Rf | Gf | Bf | 明f | 明差 | 色差 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 黒 | 000000 | 0 | 0 | 0 | 0 | 263 | 765 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 紺 | 000066 | 0 | 0 | 102 | 15 | 248 | 663 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 赤 | 660000 | 102 | 0 | 0 | 30 | 233 | 663 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 緑 | 006600 | 0 | 102 | 0 | 60 | 203 | 663 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 紺 | 000099 | 0 | 0 | 153 | 22 | 241 | 612 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 赤 | 990000 | 153 | 0 | 0 | 46 | 217 | 612 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 緑 | 009900 | 0 | 153 | 0 | 90 | 173 | 612 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 紺 | 0000CC | 0 | 0 | 204 | 29 | 234 | 561 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 赤 | CC0000 | 204 | 0 | 0 | 61 | 202 | 561 |
白 | FFFFFF | 255 | 255 | 255 | 263 | 緑 | 00CC00 | 0 | 204 | 0 | 120 | 143 | 561 |
ピンク | FFCCFF | 255 | 204 | 255 | 233 | 黒 | 000000 | 0 | 0 | 0 | 0 | 233 | 714 |
ピンク | FFCCFF | 255 | 204 | 255 | 233 | 緑 | 009900 | 0 | 153 | 0 | 90 | 143 | 561 |
ピンク | FFCCFF | 255 | 204 | 255 | 233 | 青 | 0000CC | 0 | 0 | 204 | 29 | 204 | 510 |
ピンク | FFCCFF | 255 | 204 | 255 | 233 | 赤 | CC0000 | 204 | 0 | 0 | 61 | 172 | 510 |
薄緑 | CCFFCC | 204 | 225 | 204 | 222 | 黒 | 000000 | 0 | 0 | 0 | 0 | 222 | 633 |
薄緑 | CCFFCC | 204 | 225 | 204 | 222 | 緑 | 006600 | 0 | 102 | 0 | 60 | 162 | 531 |
薄緑 | CCFFCC | 204 | 225 | 204 | 222 | 紺 | 000066 | 0 | 0 | 102 | 15 | 207 | 531 |
薄緑 | CCFFCC | 204 | 225 | 204 | 222 | 赤 | 660000 | 102 | 0 | 0 | 30 | 192 | 531 |