文字色と背景色
コンピュータの発達と普及により、プレゼン資料・ホームページなど、情報発信する機会が増加しました。このとき、文字色と背景色の組み合わせによって、文字が見づらくなってしまうことがあります。
一般色覚の人には見分けやすくても、色弱の人には見分けにくい、という色の組み合わせもあるので、注意が必要です。
色弱の人には見分けやすいかどうかは、色弱の人に確認してもらうのが一番好ましいですが、すべてチェックしてもらうのは現実には難しいでしょう。
シミュレーター
そこで、文字色と背景色の組み合わせから、色弱の人の見え方を模擬体験するシミュレータを作成しました。コントラスト比（明るさの差）も計算します。
C: 人にやさしい色づかいをすすめる会
文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00
P: 人にやさしい色づかいをすすめる会
文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00
D: 人にやさしい色づかいをすすめる会
文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00
T: 人にやさしい色づかいをすすめる会
文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00
モノクロ: 人にやさしい色づかいをすすめる会
文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00
C型は一般色覚、P型、D型、T型は色弱です。詳しくは「色覚についての基礎知識」をご覧ください。
見え方のシミュレーション
このシミュレータは、C型(一般色覚)の人向けに、色弱の人が見分けにくい色を模擬体験してもらうために、色を変換して提示しています。(色弱の人に見えている色を再現するものではありません。)
C型の見え方から、それぞれの色弱のタイプへの変換計算式は、A Physiologically-based Model for Simulation of Color Vision Deficiencyで公開されている数値を用いています。
Chromeブラウザの拡張アドオンSpectrumで、この計算式が採用されていたため、当シミュレータでもこの計算式を採用しています。
※色弱の人の中でも、色弱の程度は様々ですが、上のシミュレーションでは、色弱の度合いが最も強いケースをシミュレートしています。
コントラスト比
文字と背景の明るさの差を計算しています。計算式は、Web Content Accessibility Guidelines (WCAG) 2.0(ウェブアクセシビリティ基盤委員会)を用いています。コントラスト比は最小で1、最大で21です。
WCACでは、見やすいコントラスト比の基準を定めています。基準はレベルA(最低)、AA、AAA(最高)があります。AA以上の水準が好ましいです。
- レベルAAA: 7:1以上 (大きな文字の場合は4.5:1以上)
- レベルAA: 4.5:1以上 (大きな文字の場合は3:1以上)
大きな文字は、半角英数字の場合は18ポイント以上となっています。また日本語の全角文字の場合は、22ポイント、または太字18ポイント以上が同等とされています。
⇒色のコントラスト比だけを調べたい場合は、こちらをごらんください。
※P型、D型、T型の見え方をエミュレートした上でコントラスト比を算出しているため、P型、D型、T型のコントラスト比については実際よりずれる可能性があります。
シミュレータ作成者
人にやさしい色づかいをすすめる会 企業会員 レスキューワーク株式会社代表取締役 水野 史土