ウェブアプリのダークモード対応
「見やすさ」「わかりやすさ」の観点で考える
PWA Night vol.41 ～Design〜
2022-07-20
土屋 一彦 (@caztcha)
ウェブユーザビリティ / アクセシビリティ / 情報設計 (Information Architecture : IA)
Accessible & Usable
なぜ、ダークモード？
Slack
Feedly
YouTube
Line
GitHub
Google Calendar
Notion
Overcast
一般ユーザーが利用する OS のほとんどで、ダークモード (ダークテーマ) への切替が標準装備されている。
* macOS 10.14 Mojave 以降、iOS 13 以降、iPadOS 13 以降、Android 10 以降、Windows 10 以降。
ダークモード対応は必須？
アクセシビリティの観点では、必ずしも必須要件ではない。
*W3C 勧告「Web Content Accessibility Guidelines (WCAG)」には、ダークモード対応の達成基準はない。
ロービジョン (弱視) のユーザーの中には、暗い背景色と明るい文字色の組み合わせを好む人もいるが、OS の反転表示機能 (ハイコントラストモード) で解決できる。
必須要件でなくとも、よりよい UX (ユーザー体験) の観点で考えてみると :
ダークモード対応する理由
Nielsen Norman Group (NN/g) の記事
Dark Mode vs. Light Mode: Which Is Better?
https://www.nngroup.com/articles/dark-mode/
…という理由から、ユーザーの任意でライトまたはダークの表示切替が可能になっていることが推奨されている。
ダークモード対応で気をつけたいこと
カラースキーム (色彩計画) を設計する。
機械的な色反転は避ける
CSS の filter プロパティを用いて上記のように機械的に色を反転させるのはお手軽だが、iOS (Safari / Chrome) でズームすると、テキストや SVG であっても輪郭がぼやけてジャギーが出てしまう現象が見られる。
@media (prefers-color-scheme: dark){
:root{
filter: invert(100%) hue-rotate(180deg);
}
:root img{
filter: invert(100%) hue-rotate(180deg);
}
}
カラースキームを (地道に、丁寧に) 設計する
:root{
--color-basic: #333333;
/* 文字色 : 基本 */
--color-heading: #000000;
/* 文字色 : 見出し */
--color-interactive: #33568A;
/* リンクやボタンなどインタラクティブなコンポーネント */
--bgcolor-basic: #FFFFFF;
/* 背景色 : 基本 */
：
}
@media (prefers-color-scheme: dark){
:root{
--color-basic: #F7F7F7;
--color-heading: #FCFCFC;
--color-interactive: #A1C7EA;
--bgcolor-basic: #333333;
：
}
}
CSS 変数 (カスタムプロパティ) でライトモードとダークモードの両方に対して共通したカラースキームを定義し、各々の変数名に対して (可読性に優れた) 配色を割り当てる。
可読性/視認性に優れた配色にする。
前景色 (文字色) と背景色とのコントラストを十分に確保する
達成基準 1.4.3 コントラスト (最低限)
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。
達成基準 1.4.11 非テキストのコントラスト
以下の視覚的提示には、隣接した色との間で少なくとも 3:1 のコントラスト比がある。
* W3C 勧告「Web Content Accessibility Guidelines (WCAG) 2.1」より抜粋
ロービジョン、色覚特性、老眼、利用コンテキスト (例 : 屋外でデバイスを見ている) など、ユーザーが抱える多様性によってコンテンツ利用が阻害されることのないようにする。
Colour Contrast Analyser
背景色を真っ黒 (#000000) にするのは避ける
前景色とのコントラストを十分に保ちつつ、黒に近い濃いめのグレーを基本の背景色に採用する。
前景色の彩度を抑えめにする
基本の文字色は真っ白 (#ffffff) よりも若干オフホワイト気味にしたり、リンクやボタン、その他のアクセントカラーも若干彩度を落とし気味にしたり (視認性が悪くならないように適宜明度なども調整しつつ) して、目に優しい感じに配色する。
ダークモードに白背景の画像を配置する場合
ユーザーの認知負荷を高めない。
ライトモードとダークモードとで、チャンク (情報の塊) を同等に認知できるようにする
カードの塊感が視認しやすい
カードの境界が不明瞭。
カード内側の白い区切り線が悪目立ちして、チャンクを誤認しそう。
ライトモードとダークモードとで、フォーカスインジケーターを同等に認知できるようにする
運動障害、上肢障害、怪我などでポインティングデバイスを利用できないユーザーは、キーボード操作によって UI コンポーネントにフォーカスを動かして実行する、という使いかたをするため、「フォーカスが今どこに当たっているか」の識別はとても重要。
まとめ
ご清聴ありがとうございました。