多くのウェブ制作者達が色覚多様性について考えることはまずない。せいぜいコントラストを確保したり、リンクの下線を消さないようにしたりすることで、グレースケールでもそれなりに識別できるように注意するくらいだろう。それで十分とも言えそうではあるが、それ以上考えようにも取っ掛かりがないためそれで止まっているとも言える。その取っ掛かりとして色覚多様性を再現するSVGのフィルターを作った。
Repository: Color Blindness Emulation
filters.svgに含まれる8つのフィルターは、そのアルゴリズムはともかく、feColorMatrix要素を使ったごく簡単なものだ。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<defs>
<filter id="protanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.567, 0.433, 0, 0, 0
0.558, 0.442, 0, 0, 0
0, 0.242, 0.758, 0, 0
0, 0, 0, 1, 0"/>
</filter>
</defs>
</svg>このような行列によってProtanopia(1型2色覚/赤色盲)はエミュレートすることができる。
利用はFirefox 35以降やChrome 18以降、Safari 6以降ならばCSS経由で行える。filterプロパティー(Internet Explorerで実装されている独自のfilterプロパティーとは違うもの)でurl()を使ってSVGファイルを参照すれば良い。
Demo: Color Blindness Emulator with Filter Effects via CSS
デモではPlaceIMGの画像をそれぞれフィルターをかけて色覚多様性の状態をエミュレーションしている。画像によっては違いがわかりづらいが、色覚多様性のタイプと画像によって大きく結果が異なるということがわかるということでもあるだろう。再読み込みすれば様々な画像で確認できるので試してみると良い。Chromeではフィルターを適用する処理がかなり重いようで、CPUを占領してしまうことには留意して欲しい。
.protanopia {
filter: url('622.svg#protanopia');
}filterプロパティーではblur()などの組み込み関数を使う以外にも、このようにSVGのfilter要素として定義したフィルターをurl()を使って参照することができる。具体的には予めSVGのfilter要素にIDを振っておき、URL識別子で参照することになる。他にも参照する方法はあるが、少しややこしく挙動も微妙なためここでは触れない。
最終的にはこれを使って任意のウェブページを色覚多様性をエミュレートした形で確認するツールを作りたい。そういったツールを使って常に確認するべきだとは思わないが、そういったツールを一度体験するだけでも色覚多様性の人が見ている世界について少しだけ知識を得ることができるはずだ。
視覚障害者と違い、メディア・タイプで判別できない世界であることもまた難しい点だ。視覚障害者へはそれなりにまともにマークアップして、CSSをうまく切り分けてやるだけでベースラインは確保できそうだが、色覚多様性へはそういうアプローチでは届くことはない。カラー・スキームの制作にもうひとつ考慮すべきことが加わることは間違いない。
例えばこのウェブサイトではブルーがメイン・カラーとなっているが、仮にこれに加えて所々でイエローを使っていたりすると、Tritanopia(3型2色覚/青色盲)の人にはブルーはグレーに、イエローはピンク(に近い色)に見えるため、ピンクに見える部分がメイン・カラー、すなわちリンク等に誤解されてしまうかもしれない。
これはもちろん極端な例だが、そういったことがわかるかもしれないツールがあることは、取っ掛かりとしては悪くはないはずだ。