UIの色のコントラスト比十分ですか？
- 1. 有限会社アップルップル 森⽥かすみ Frontend Nagoya #9 UIの⾊のコントラスト⽐ 充分ですか？
- 7. コントラスト⽐⼤事？
- 9. Hello World!
- 10. Hello World!
- 11. 認識しづらいと 伝わりづらくなる
- 12. ⾒やすさは 伝達を加速させる
- 13. 見やすさ コントラスト比
- 17. ⾔われた側が「むむむ」ってする理由 😐 • べつにアクセシビリティが嫌なわけじゃない • 不安になってるだけ （どうしたら対応できるのか知らない or デザインに制限ができるのではないかという不安）
- 18. • ⼀般的な基準を理解する • コントラスト⽐を確認するための便利なツール • こんなときはどうするの？コントラスト⽐クイズ 不安を取り除くには対応⽅法を提案する
- 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 コントラスト⽐ ユーザーインターフェースやグラフィックが該当する
- 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