UX
@sumiresakamoto
WCAG
？
@sumiresakamoto
WCAG（Web Content Accessibility Guidelines）
国際標準となっている Web Accessibility の ガイドライン
三つの適合レベル が定義されている
レベル A
レベル AA
レベル AAA
・・・ 満たしておきたい最低ライン
・・・ 一般的に アクセシビリティが高い と言われるライン
・・・ コンテンツによっては満たせないものもある
推奨
@sumiresakamoto
文字 の コントラスト について
サイズの大きな文字では
少なくとも 3 : 1 のコントラスト比 があること
文字の視覚的提示に
少なくとも 4.5 : 1 のコントラスト比 があること
少なくとも 18pt 又は 14pt の太字 ※ 12pt を 基準とする
https://waic.jp/translations/WCAG22/#contrast-minimum 達成基準 1.4.3 コントラスト (最低限) AA
@sumiresakamoto
文字の コントラスト比 とは？
❞
@sumiresakamoto
相対輝度 とは？
相対輝度は RGB それぞれ決められた計算式で算出 する
❞
@sumiresakamoto
相対輝度 の 算出式
❞
@sumiresakamoto
PHP で 算出してみる
@sumiresakamoto
( ^ω^) さて...
@sumiresakamoto
このスライドで使われている文字の
コントラスト比 は・・・？
WCAG AA に準拠 ✅
5.85 : 1
最低 4.5 : 1 必要
3.66 : 1
最低 3 : 1 必要
※ 小数点の切り捨てレベルによって多少前後します
@sumiresakamoto
Conclusion
何でも良いから 作ることが大事
@sumiresakamoto
Self-introduction
sumire
@sumiresakamoto
Resources
@sumiresakamoto