Frontend Nagoya #9で発表した内容です

1. 有限会社アップルップル 森⽥かすみ
Frontend Nagoya #9
UIの⾊のコントラスト⽐
充分ですか？

2. C C
森⽥ かすみ
有限会社アップルップル デザイナー
@KasumiMorita

3. Frontend に関わる⼈たち
にも理解できるような
配⾊のコントラスト⽐の話

6. いくらかっこよくても
⾊のコントラスト⽐
充分じゃないデザイン
少なくない問題

7. コントラスト⽐⼤事？

8. ここで質問！
読みやすいのはどっち？

9. Hello World!

10. Hello World!

11. 認識しづらいと
伝わりづらくなる

12. ⾒やすさは
伝達を加速させる

13. 見やすさ
コントラスト比

14. デザイナーと協力しよう！
どうやって伝える？

16. 「ここ、アクセシブルじゃないですね」
「むむむ」 😐⾔われた⼈：
⾒つけた⼈：

17. ⾔われた側が「むむむ」ってする理由
😐
• べつにアクセシビリティが嫌なわけじゃない
• 不安になってるだけ
（どうしたら対応できるのか知らない or
デザインに制限ができるのではないかという不安）

18. • ⼀般的な基準を理解する
• コントラスト⽐を確認するための便利なツール
• こんなときはどうするの？コントラスト⽐クイズ
不安を取り除くには対応⽅法を提案する

19. って気持ちよく⾔ってもらえるように
「やろうやろう！」 😉

20. 感覚は人それぞれ？
一般的な基準に頼ろう

21. Frontend
Nagoya
Frontend
Nagoya
十分なコントラスト比なのはどっち？

22. なんて読む？
WCAG
（うぃーけぁぐ）

23. https://waic.jp/docs/WCAG20/Overview.htmlWCAG2.0（日本語訳）

24. https://www.w3.org/TR/WCAG21/WCAG2.1

25. 5.40 5.68 4.67 5.36 7.71
3.03 3.36 1.98 2.24 2.85
https://developer.a-blogcms.jp/blog/changelog/release2100.htmla-blog cms Ver.2.10.0リリースしました！

26. テキストのコントラスト比の達成基準
レベルAA レベルAAA
18px
14px bold
3:1
-4.5:1 7:1
4.5:1 18px
14px bold
-
フォントサイズコントラスト比 フォントサイズコントラスト比

27. 達成基準 1.4.11 グラフィックのコントラスト
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html1.4.11: Non-text Contrast
3:1
レベルAA
コントラスト⽐
ユーザーインターフェースやグラフィックが該当する

28. コントラスト比ってどうやって確認するの？
便利なツール紹介

29. https://usecontrast.com/Contrast
おしゃれ！
デザイナーさんも
使ってくれそう！

30. https://usecontrast.com/guideContrast

31. Google Chrome
既存UIの
改修に◎
colorが対象

32. 最後に今日の復習
配色コントラスト比クイズ！

33. Frontend
Nagoya
p {
font-size: 14px;
}
CSS
Fail or Success：レベルAAFail or Success：レベルAA
コントラスト比
21:1

34. Frontend
Nagoya
p {
font-size: 14px;
}
CSS
Fail or Success：レベルAAFail or Success：レベルAA
コントラスト比
2.26:1

35. Frontend
Nagoya
Fail or Success：レベルAA
p {
font-size: 12px;
}
CSS
コントラスト比
3.24:1

36. Frontend
Nagoya
Fail or Success：レベルAA
p {
font-size: 14px;
font-weight: bold;
}
CSS
コントラスト比
3.24:1

37. Frontend
Nagoya
Fail or Success：レベルAAA
p {
font-size: 17px;
}
CSS
コントラスト比
5.58:1

38. Fail or Success：レベルAA
or
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

39. ご清聴ありがとうございました
KasumiMorita
kasumi.morita.750
https://mkasumi.com