2022/06/11 Podcastはしばらくお休みします。
Todoistのテーマとラベル色のコントラスト比を検証したら相性のいい組み合わせが判明した
こんにちは。安慶名勇子（アゲナユウコ）です。
Todoistの機能の中でも『ラベル』が特に気に入っています。プレミアムプラン以上の有料バージョンでのみ提供されている機能ですが、ラベルを使うとタスクの性質がひと目でわかるようになるため重宝しています。
ラベルに指定できる色も豊富にありますが、ふと「好みの色を選べばいいってものでもないのでは…？」と思い、テーマとラベル色の組み合わせを調べてみることにしました。組み合わせ方によっては可視性が高まり、よりスピーディにタスクをこなせるようになるかも。よければ最後までお読みください。
Contents
ラベルに指定できる色は現在20色
Todoistのラベルには色が付けられます。現在指定できる色はこちらの20色。カスタマイズで色をアレンジすることはできません。
それぞれの色の名前とカラーコードは次のとおり。
| Berry Red | Red | Orange | Yellow |
|---|---|---|---|
| #b8255f | #db4035 | #ff9933 | #fad000 |
| Olive Green | Lime_Green | Green | Mint_Green |
| #afb83b | #7ecc49 | #299438 | #6accbc |
| Teal | Sky Blue | Light Blue | Blue |
| #158fad | #14aaf5 | #96c3eb | #4073ff |
| Grape | Violet | Lavender | Magenta |
| #884dff | #af38eb | #eb96eb | #e05194 |
| Salmon | Charcoal | Grey | Taupe |
| #ff8d85 | #808080 | #b8b8b8 | #ccac93 |
背景色とラベル色の組み合わせイメージ
適用しているテーマによって背景色が異なるため、それぞれの色をラベルに指定した時の見え方をシミュレーションしてみました。Todoistのテーマは12種類ありますが、背景は2種類しかありません。『ダーク』のみ背景色が黒に限りなく近いグレー（#1f1f1f）（黒に見えるけど真っ黒ではない） で、それ以外のテーマは白（#ffffff）です 。
それぞれのテーマごとにイメージをキャプチャしたのがこちらです。
ご覧いただいてわかるように
- 白い背景に映える文字は濃い色
- 濃い背景に映える文字は薄い色
ですよね。なんとなくの感覚で判断してもいいのですが…はっきりわかる数値が欲しくないですか？見やすさを数値化したものが。
背景色と文字色には見やすさのガイドラインがある
実は、インターネットの世界には、ウェブコンテンツをより利用しやすくするための一定の基準を設けたガイドラインというものが存在します。それが『Web Content Accessibility Guidelines (WCAG) 2.0』です。今回はこの基準に沿って、Todoistの背景色とラベル色のコントラスト比を調べてみたいと思います。
コントラスト比の算出は背景色と文字色の輝度を使用するようですが、詳しい数式はここでは割愛します。 Web Content Accessibility Guidelines (WCAG) 2.0 では、最低限クリアしたい達成基準をAA、より高いレベルで達成している基準をAAAとランク付けしています。 コントラスト比が大きいほど読みやすいということになります。
同じ背景色と文字色であっても、文字サイズが異なると達成基準も変化します。小さい文字と大きい文字、太文字では見やすさも変わりますし、その点が考慮されているのですね。
Web Content Accessibility Guidelines (WCAG) 2.0 により指定されている色のコントラスト比と達成レベルはこのようになっています。
| 文字の種類 | AA（達成） | AAA（高レベルで達成） |
|---|---|---|
| 通常文字 (22px未満) | 4.5以上 | 7以上 |
| 巨大文字 (22px以上) | 3以上 | 4.5以上 |
| 太文字 (14px以上) | 3以上 | 4.5以上 |
Todoistの背景色とラベル色のコントラスト比を調べてみた
Todoistのテーマによって、背景色とラベル色のコントラスト比がどうなるのかを算出した結果がこちらです（コントラスト比の算出はこちらのサイトを利用しました）。
背景色が白（ダーク以外のテーマ）の場合
まずは、ダーク以外のテーマを適用した時の背景色とラベル色のコントラスト比です（画面キャプチャはクリックすると大きくなります）。Todoistのラベルのフォントサイズは10pxなので、通常文字（22px）未満の項目が特に重要です。
背景色：#ffffff
文字色：全20色
上記の結果を表にまとめたものがこちらです。コントラスト比（C比）は小数点第3位を四捨五入し、第2位までの表示にしています。
| 背景色と 文字色 | C比 | 通常文字 (22px未満) | 巨大文字 (22px以上) | 太文字 (14px以上) |
|---|---|---|---|---|
| Berry Red | 6.06 | AA | AAA | AAA |
| Red | 4.38 | NG | AA | AA |
| Orange | 2.13 | NG | NG | NG |
| Yellow | 1.49 | NG | NG | NG |
| Olive Green | 2.16 | NG | NG | NG |
| Lime Green | 1.98 | NG | NG | NG |
| Green | 3.90 | NG | AA | AA |
| Mint Green | 1.91 | NG | NG | NG |
| Teal | 3.77 | NG | AA | AA |
| Sky Blue | 2.59 | NG | NG | NG |
| Light Blue | 1.86 | NG | NG | NG |
| Blue | 4.11 | NG | AA | AA |
| Grape | 4.61 | AA | AAA | AAA |
| Violet | 4.58 | AA | AAA | AAA |
| Lavender | 2.08 | NG | NG | NG |
| Magenta | 3.64 | NG | AA | AA |
| Salmon | 2.23 | NG | NG | NG |
| Charcoal | 3.95 | NG | AA | AA |
| Gray | 1.98 | NG | NG | NG |
| Taupe | 2.12 | NG | NG | NG |
背景色がグレー（ダークのテーマ）の場合
続いて、ダークのテーマを適用した時の背景色とラベル色のコントラスト比です（画面キャプチャはクリックすると大きくなります）。
背景色：#1f1f1f
文字色：全20色
上記の結果を表にまとめたものがこちらです。コントラスト比（C比）は小数点第3位を四捨五入し、第2位までの表示にしています。
| 背景色と 文字色 |
C比 | 通常文字 (22px未満) |
巨大文字 (22px以上) |
太文字 (14px以上) |
|---|---|---|---|---|
| Berry Red | 2.72 | NG | NG | NG |
| Red | 3.77 | NG | AA | AA |
| Orange | 7.74 | AAA | AAA | AAA |
| Yellow | 11.06 | AAA | AAA | AAA |
| Olive Green | 7.65 | AAA | AAA | AAA |
| Lime Green | 8.34 | AAA | AAA | AAA |
| Green | 4.23 | NG | AA | AA |
| Mint Green | 8.62 | AAA | AAA | AAA |
| Teal | 4.37 | NG | AA | AA |
| Sky Blue | 6.36 | AA | AAA | AAA |
| Light Blue | 8.87 | AAA | AAA | AAA |
| Blue | 4.01 | NG | AA | AA |
| Grape | 3.57 | NG | AA | AA |
| Violet | 3.60 | NG | AA | AA |
| Lavender | 7.92 | AAA | AAA | AAA |
| Magenta | 4.53 | AA | AAA | AAA |
| Salmon | 7.38 | AAA | AAA | AAA |
| Charcoal | 4.17 | NG | AA | AA |
| Gray | 8.31 | AAA | AAA | AAA |
| Taupe | 7.76 | AAA | AAA | AAA |
コントラスト比で並べ替えたらこうなった
通常文字（22px未満）に限定し、コントラスト比で並べ替えてみたらこうなりました。つまり、テーマに応じた、見やすいラベル色・見づらいラベル色のランキングです。白背景とグレー背景では順位がきれいに逆になってます（当然と言えば当然か）。
| 順位 | 背景色白 | C比と達成度 | 背景色グレー | C比と達成度 |
|---|---|---|---|---|
| 1 | Berry Red | 6.06：AA | Yellow | 11.06：AAA |
| 2 | Grape | 4.61：AA | Light Blue | 8.87：AAA |
| 3 | Violet | 4.58：AA | Mint Green | 8.62：AAA |
| 4 | Red | 4.38：NG | Lime Green | 8.34：AAA |
| 5 | Blue | 4.11：NG | Gray | 8.31：AAA |
| 6 | Charcoal | 3.95：NG | Lavender | 7.92：AAA |
| 7 | Green | 3.90：NG | Taupe | 7.76：AAA |
| 8 | Teal | 3.77：NG | Orange | 7.74：AAA |
| 9 | Magenta | 3.64：NG | Olive Green | 7.65：AAA |
| 10 | Sky Blue | 2.59：NG | Salmon | 7.38：AAA |
| 11 | Salmon | 2.23：NG | Sky Blue | 6.36：AA |
| 12 | Olive Green | 2.16：NG | Magenta | 4.53：AA |
| 13 | Orange | 2.13：NG | Teal | 4.37：NG |
| 14 | Taupe | 2.12：NG | Green | 4.23：NG |
| 15 | Lavender | 2.08：NG | Charcoal | 4.17：NG |
| 16 | Gray | 1.98：NG | Blue | 4.01：NG |
| 17 | Lime Green | 1.98：NG | Red | 3.77：NG |
| 18 | Mint Green | 1.91：NG | Violet | 3.60：NG |
| 19 | Light Blue | 1.86：NG | Grape | 3.57：NG |
| 20 | Yellow | 1.49：NG | Berry Red | 2.72：NG |
見やすいラベルは限られてる
背景色によって見やすいラベルの色は限られてきますね。白背景の場合、AAAを達成している色は1つもない（！）という結果に対し、グレーの背景の場合は半分がAAAを達成という結果になりました。見やすいラベルを多く使えるのはダークのテーマの方なんですね。
↓こちらもダークのテーマに関する話題を取り上げていますのでよかったらお読みください。
こんにちは。Todoistヘビーユーザーの安慶名勇子（アゲナユウコ）です。
Todoistのレベルはすでにグランドマスターに達してお...
個人的には、白背景ではグレーより黄色の文字の方が見えづらいこと、黒背景でもチャコールグレーより赤の文字の方が見づらいことといった結果は意外なものでした。
見やすいラベルを知ったことで、さらにTodoistの活用が進みそうです。積極的に使いたいと思います。それと、あえて見づらいラベルを使うという手もありそうですね。見てすぐにわかる必要はないんだけど管理はしたい…というタスクは順位が下の文字色を使用するといいかも。
コントラスト比の結果を参考に、Todoistのラベル色をぜひ見直してみてくださいね。
アカウント登録とアプリのダウンロード
Todoistのアプリをスマートフォンにインストールしていない方は、まずアプリをダウンロードしましょう。
すでに無料版のTodoistをお使いの方、またはまだTodoistのアカウントを使用したことがないという方、ぜひ下記のリンクをご利用下さい。こちらからアクセスすると機能が充実したTodoistプレミアム（有料版）を 2 か月無料で使用できます。
