カレンダーUIの予定を色分けする方法｜予定が多くても見やすい配色

共有カレンダーに会議や作業予定が増えると、予定の種類ごとに色を変えたくなります。しかし色だけでは何の予定か判断しにくく、同じ時間に予定が重なると文字まで読みにくくなることがあります。ここでは部署の週間カレンダーを例に、予定の種類を3系統の色で整理し、時刻や題名も確認できる配色方法を紹介します。

予定の種類は色と文字をセットにして見分ける

カレンダーUI（予定を確認・操作する画面）では、「会議」「集中作業」「締切」など、予定の種類を色分けする方法があります。ただし、色が示す意味を変えないことが大切です。「会議」の色を重要度の高い予定にも使うと、色だけでは何を表すのか分からなくなります。重要度や承認状態などは別の文字情報として示しましょう。

各予定には「10:00〜11:00」「会議」「進捗確認」のように、時刻・種類・題名を文字で残します。WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）の「色の使用」でも、色を情報の唯一の手がかりにしないことが求められています。色を見分けられない状況でも、予定の内容を判断できる表示にします。

また、文字と背景のコントラスト比（相対的な明るさの差）も確認します。WCAG 2.2のレベルAAでは、通常サイズの文字は原則4.5:1以上、条件を満たす大きな文字は3:1以上が必要です。カレンダーの小さな時刻や予定名は、通常文字の基準で確かめるのが基本です。

会議・集中作業・締切を週表示に置く配色例

月曜から金曜までの共有カレンダーを想定し、日付のマスを白■#FFFFFF、日付や時刻の文字を濃い青灰色■#243247にします。両者のコントラスト比は約12.95:1です。補足文字を青灰色■#526174にしても白■#FFFFFFと約6.32:1ありますが、薄いグレー■#94A3B8では約2.56:1となり、小さな時刻には不足します。

• 会議：淡い紫■#EDE9FEの予定カードに濃い紫■#5B21B6で「会議」と題名を表示します。文字との比率は約7.57:1です。
• 集中作業：淡いミント■#DDF7EEに深い緑■#14532Dで「集中作業」と題名を表示します。比率は約8.08:1です。
• 締切：淡い黄■#FEF3C7に濃い茶色■#92400Eで「締切」と内容を表示します。比率は約6.37:1です。

予定カードの輪郭には青灰色■#64748Bを使う例があります。線と会議の紫■#EDE9FEは約4.01:1、集中作業のミント■#DDF7EEは約4.22:1、締切の黄■#FEF3C7は約4.27:1、マスの白■#FFFFFFは約4.76:1です。隣り合うカードの境界を分かりやすくするときに役立ちます。HEX（色を16進数で表すカラーコード）は、ここで示した各色の指定に使います。

重なる予定・今日の表示・操作時の色を確かめる

例えば火曜の「10:00〜11:00 会議：進捗確認」と「10:30〜11:30 集中作業：原稿確認」が重なる場合は、カードを横並びにするか、「ほかに2件」のような件数表示から一覧を開けるようにします。重なった領域を半透明の色で重ねるだけでは、時刻も題名も読み取れません。金曜の「17:00 締切：提出期限」も、黄の色だけでなく内容を文字で表示します。

今日の日付を淡い青■#EFF6FFで囲っても、白■#FFFFFFとの差は約1.09:1しかありません。「今日」と文字で示し、必要なら青い輪郭■#1D4ED8を追加します。輪郭は淡い青■#EFF6FFと約6.16:1、白■#FFFFFFと約6.70:1です。キーボードの操作位置を示すフォーカスには別の深い青緑■#0F766Eを使い、会議カード■#EDE9FEと約4.61:1、集中作業カード■#DDF7EEと約4.85:1、締切カード■#FEF3C7と約4.92:1を確保できます。

操作に必要な輪郭などの非テキスト情報は、隣接する色と原則3:1以上のコントラストが必要です。スマートフォンでは週の列を狭く押し込まず、日表示や予定一覧に切り替えて時刻と題名を残しましょう。HueRollではHEXコードで色を選び、白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。今回の色同士の比率は別途計算し、実際の画面でも確認する必要があります。