ハック・手帳・速読・WordPress運営・思考ログ等を綴っています。menuホームTodoistTodoistのテーマとラベル色のコントラスト比を検証したら相性のいい組み合わせが判明したTodoistTodoistのテーマとラベル色のコントラスト比を検証したら相性のいい組み合わせが判明したこんにちは。安慶名勇子(アゲナユウコ)です。Todoistの機能の中でも『ラベル』が特に気に入っています。プレミアムプラン以上の有料バージョンでのみ提供されている機能ですが、ラベルを使うとタスクの性質がひと目でわかるようになるため重宝しています。ラベルに指定できる色も豊富にありますが、ふと「好みの色を選べばいいってものでもないのでは...?」と思い、テーマとラベル色の組み合わせを調べてみることにしました。組み合わせ方によっては可視性が高まり、よりスピーディにタスクをこなせるようになるかも。よければ最後までお読みください。アカウント登録とアプリのダウンロードラベルに指定できる色は現在20色Todoistのラベルには色が付けられます。現在指定できる色はこちらの20色。カスタマイズで色をアレンジすることはできません。それぞれの色の名前とカラーコードは次のとおり。#ccac93背景色とラベル色の組み合わせイメージ適用しているテーマによって背景色が異なるため、それぞれの色をラベルに指定した時の見え方をシミュレーションしてみました。Todoistのテーマは12種類ありますが、背景は2種類しかありません。それ以外のテーマは白(#ffffff)です。それぞれのテーマごとにイメージをキャプチャしたのがこちらです。濃い背景に映える文字は薄い色ですよね。なんとなくの感覚で判断してもいいのですが...はっきりわかる数値が欲しくないですか?見やすさを数値化したものが。背景色と文字色には見やすさのガイドラインがある実は、インターネットの世界には、ウェブコンテンツをより利用しやすくするための一定の基準を設けたガイドラインというものが存在します。今回はこの基準に沿って、Todoistの背景色とラベル色のコントラスト比を調べてみたいと思います。コントラスト比の算出は背景色と文字色の輝度を使用するようですが、詳しい数式はここでは割愛します。最低限クリアしたい達成基準をAA、より高いレベルで達成している基準をAAAとランク付けしています。コントラスト比が大きいほど読みやすいということになります。同じ背景色と文字色であっても、文字サイズが異なると達成基準も変化します。小さい文字と大きい文字、太文字では見やすさも変わりますし、その点が考慮されているのですね。より指定されている色のコントラスト比と達成レベルはこのようになっています。4.5以上Todoistの背景色とラベル色のコントラスト比を調べてみたTodoistのテーマによって、背景色とラベル色のコントラスト比がどうなるのかを算出した結果がこちらです(コントラスト比の算出はこちらのサイトを利用しました)。背景色が白(ダーク以外のテーマ)の場合まずは、ダーク以外のテーマを適用した時の背景色とラベル色のコントラスト比です(画面キャプチャはクリックすると大きくなります)。Todoistのラベルのフォントサイズは10pxなので、通常文字(22px)未満の項目が特に重要です。上記の結果を表にまとめたものがこちらです。コントラスト比(C比)は小数点第3位を四捨五入し、第2位までの表示にしています。続いて、ダークのテーマを適用した時の背景色とラベル色のコントラスト比です(画面キャプチャはクリックすると大きくなります)。上記の結果を表にまとめたものがこちらです。コントラスト比(C比)は小数点第3位を四捨五入し、第2位までの表示にしています。AAAコントラスト比で並べ替えたらこうなった通常文字(22px未満)に限定し、コントラスト比で並べ替えてみたらこうなりました。テーマに応じた、見やすいラベル色・見づらいラベル色のランキングです。白背景とグレー背景では順位がきれいに逆になってます(当然と言えば当然か)。2.72:NG見やすいラベルは限られてる背景色によって見やすいラベルの色は限られてきますね。白背景の場合、AAAを達成している色は1つもない(!)という結果に対し、グレーの背景の場合は半分がAAAを達成という結果になりました。見やすいラベルを多く使えるのはダークのテーマの方なんですね。↓こちらもダークのテーマに関する話題を取り上げていますのでよかったらお読みください。2019.05.05Todoistのテーマはダーク一択!目に優しい上に、タスクがサクサクこなせるなんて控えめに言って最高すぎ。Todoistヘビーユーザーの安慶名勇子(アゲナユウコ)です。Todoistのレベルはすでにグランドマスターに達しており、最高位の『達人』レベルまで残すところ1ランクとなりました。大袈裟でなく、私の生活はTodoistとともにあると言え...個人的には、白背景ではグレーより黄色の文字の方が見えづらいこと、黒背景でもチャコールグレーより赤の文字の方が見づらいことといった結果は意外なものでした。見やすいラベルを知ったことで、さらにTodoistの活用が進みそうです。積極的に使いたいと思います。それと、あえて見づらいラベルを使うという手もありそうですね。見てすぐにわかる必要はないんだけど管理はしたい...というタスクは順位が下の文字色を使用するといいかも。コントラスト比の結果を参考に、Todoistのラベル色をぜひ見直してみてくださいね。アカウント登録とアプリのダウンロードTodoistのアプリをスマートフォンにインストールしていない方は、まずアプリをダウンロードしましょう。無料版のTodoistをお使いの方、またはまだTodoistのアカウントを使用したことがないという方、ぜひ下記のリンクをご利用下さい。か月無料で使用できます。指導や講演をしています。Todoistのテーマはダーク一択!目に優しい上に、タスクがサクサクこなせるなんて控えめに言って最高すぎ。【Vol.019】使ってみて初めて分かる。気にも留めないほど些細な行動が時間を奪っていた原因だった。毎日様々なタスクをTodoistに放り込んではこなしてい...TodoistTodoistのテーマはダーク一択!目に優しい上に、タスクがサクサクこなせるなんて控えめに言って最高...こんにちは。Todoistヘビーユーザーの安慶名勇子(アゲナユウコ)...Todoistタイムトラッキングで無駄な時間を削減!時間計測ツールはTogglがおススメ1日24時間。92.3%の実績を持つ。手帳術メールマガジン読者約3,000人。現在は現在は業務改善コンサルタントとして活動中。1冊15分で本が読めるイントレ(速読)等の学びを提供している。詳しいプロフィールはこちらからどうぞ。