Notionの色設定による文書視認効率変動は個人差によるものなのか国際規格WCAGに沿って調査してみた #Notion
Notionのテキストは背景色と文字色のいずれかを変更できます。背景色を変更すると文字色は黒で固定され、文字色を変更すると背景色は白で固定されます。ただ、変更後の組み合わせは必ずしも読みやすいとは限りません。
背景色や文字色の不適切な組み合わせは、視認効率の低下につながることがあります。変更が必要な場合は、すくなくともコントラスト比を4.5:1は保つようにしましょう。これは、国際規格であるWCAG(Web Content Accessibility Guidelines)で提唱されている値です。
Notionの色設定で可能な組み合わせが、WCAGにおいてどのような評価になるのかをWebAIM: Contrast Checkerを使用してチェックしてみました。
チェック要件
Notionで設定できる色はAPIリファレンスのThe annotation objectに記載されていますが、あくまで色の名称でありカラーコードではありません。そこでChrome拡張のカラーピッカーツールにてNotion上から直接色を取得しました。採取に使った文字は■(しかく)です。
Notionの色候補デフォルトは表示設定のダークモードとライトモードで、背景色と文字色がそれぞれ白と黒に変わります。
ライトモードの背景色は#ffffffでフォントカラーコードは#37352F、ダークモードの背景色は#191919でフォントカラーコードは#d4d4d4。単純な白黒ではありません。
また、背景色と文字色も同じ色名指定にはなっていますが、カラーコードは共通ではありません。そして文字色に限ってはモード間でもカラーコードが異なっており共通ではありません。
つまり、ダークモードとライトモードの両方で背景色と文字色をそれぞれチェックする必要があります。
WCAGはコントラスト比4.5:1以上とする場合に、太字ではない場合の文字サイズが18ポイント、太字の場合は14ポイント以上を前提としています。Chromeのデベロッパーツールで確認した結果、Notionの通常時文字サイズは16ポイントで、小さめにすると14ポイントとなります。小さめのフォントの場合は太字かコントラスト比の相当高い状態が好ましくなります。
Contrast Checkerによる結果
ライトモードとダークモードのコントラスト比と、フォント種別WCAG AA結果を元にNotionでモードの通常利用が好ましいかチェックした一覧です。
文字色側を変更してのチェック結果 - ライトモード
| ColorCode | コントラスト比 | Notion利用 | |
|---|---|---|---|
| デフォルト | #37352F | 12.26:1 | ◯ |
| グレー | #787774 | 4.47:1 | - |
| ブラウン | #9F6B53 | 4.46:1 | - |
| オレンジ | #D9730F | 3.27:1 | - |
| 黄 | #CB912F | 2.75:1 | - |
| 緑 | #458262 | 4.54:1 | ◯ |
| 青 | #347EA9 | 4.46:1 | - |
| 紫 | #9065B0 | 4.49:1 | - |
| ピンク | #C14D8A | 4.47:1 | - |
| 赤 | #D44C47 | 4.26:1 | - |
文字色側を変更してのチェック結果 - ダークモード
| ColorCode | コントラスト比 | Notion利用 | |
|---|---|---|---|
| デフォルト | #d4d4d4 | 12.26:1 | ◯ |
| グレー | #9b9b9b | 6.32:1 | ◯ |
| ブラウン | #ba8570 | 5.58:1 | ◯ |
| オレンジ | #c87d48 | 5.42:1 | ◯ |
| 黄 | #ca9849 | 6.78:1 | ◯ |
| 緑 | #529e71 | 5.43:1 | ◯ |
| 青 | #5e87c9 | 4.84:1 | ◯ |
| 紫 | #9d68d3 | 4.48:1 | - |
| ピンク | #d15896 | 4.64:1 | ◯ |
| 赤 | #df5452 | 4.62:1 | ◯ |
背景色側を変更してのチェック結果 - ライトモード
| ColorCode | コントラスト比 | Notion利用 | |
|---|---|---|---|
| デフォルト | #FFFFFF | 12.26:1 | ◯ |
| グレー | #2f2f2f | 2.73:1 | - |
| ブラウン | #4a3228 | 2.73:1 | - |
| オレンジ | #D9730F | 3.27:1 | - |
| 黄 | #CB912F | 2.75:1 | - |
| 緑 | #458262 | 4.54:1 | ◯ |
| 青 | #347EA9 | 4.46:1 | - |
| 紫 | #9065B0 | 4.49:1 | - |
| ピンク | #C14D8A | 4.47:1 | - |
| 赤 | #D44C47 | 4.26:1 | - |
背景色側を変更してのチェック結果 - ダークモード
| ColorCode | コントラスト比 | Notion利用 | |
|---|---|---|---|
| デフォルト | #191919 | 11.86:1 | ◯ |
| グレー | #2f2f2f | 9.03:1 | ◯ |
| ブラウン | #4a3228 | 7.96:1 | ◯ |
| オレンジ | #D9730F | 2.21:1 | - |
| 黄 | #CB912F | 1.85:1 | - |
| 緑 | #458262 | 3.06:1 | - |
| 青 | #347EA9 | 3.01:1 | - |
| 紫 | #9065B0 | 3.03:1 | - |
| ピンク | #C14D8A | 3.01:1 | - |
| 赤 | #D44C47 | 2.87:1 | - |
使うべき色設定
文字色については基本デフォルトの値を使うべきです。複数の色を使いたい場合はダークモードがおすすめです。
背景色変更は出来る限り見出しにとどめておくべきです。
あとがき
ライドモードにて文字色をデフォルトから変えている文章が見づらく感じていたものの、個人差の受け方もあり得ると考えていました。ただ、今回のチェックにて、ダークモード前提で編集していると見づらい色使いにしてしまうケースも出てくるのかもしれないと推測できました。
文字色については特に見せ方にこだわりがなければ、基本デフォルトを使っておくことをおすすめします。
![[イベント開催のお知らせ] Notionを企業で導入する秘訣！ 〜移行ノウハウやセキュリティを徹底解説〜 #notion](https://devio2024-media.developers.io/image/upload/v1728529001/user-gen-eyecatch/rvuypewjgvhjjarcmanr.png)
