ログ表示画面に合う文字色は？大量のテキストを見やすくする配色
システムの記録を一覧にするログ表示画面は、一度に何百行も並ぶことがあります。すべての行を鮮やかな色にすると、警告やエラーがかえって埋もれてしまいます。一方、時刻を薄くしすぎると問題が起きた順序を追いにくくなります。ここでは通知送信処理の架空のログを例に、本文・時刻・重要な状態の文字色を整理する方法を紹介します。
本文と時刻は同じ背景の上で明るさを分ける
ログの表示面をごく淡い青みのグレー#F8FAFCにして、通常のメッセージを濃いグレー#1F2937にすると、文字と背景のコントラスト比は約14.03:1です。コントラスト比とは、隣り合う色の相対的な明るさの差を示す数値です。WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）のレベルAAでは、通常サイズの文字は原則4.5:1以上、条件を満たす大きな文字は3:1以上が基準です。
日時は本文より少し控えめな青灰色#475569にすると、同じ背景#F8FAFCとの比率は約7.24:1です。これに対し、さらに薄い青灰色#94A3B8では約2.45:1に下がり、小さな時刻表示には不足します。「補助情報だから薄くする」ではなく、時刻が調査に必要な情報であることを意識して選びます。
行を読み比べやすくするには、時刻・種別・内容の表示位置をそろえ、行間や折り返し方も整えます。等幅フォント（文字ごとの幅がほぼ一定の書体）を使う場合でも小さくしすぎず、長い行は折り返し表示と横スクロールを切り替えられるようにすると、識別子や長いメッセージを追いやすくなります。
警告・エラーは行全体ではなく種別と文言で強調する
次の4行は架空の通知送信ログです。INFOは通常の情報、WARNは注意が必要な警告、ERRORは処理の失敗、OKは成功を表します。これらの文字は色が分からなくても意味が伝わるよう、そのまま表示します。
09:15 INFO 送信処理を開始：通常の内容は濃いグレー#1F2937で表示します。09:16 WARN 再送を予定：WARNのラベルだけを濃い茶色#92400Eにします。淡い背景#F8FAFCとの比率は約6.78:1です。09:17 ERROR 接続失敗：ERRORのラベルを濃い赤#B91C1Cにすると、背景#F8FAFCとの比率は約6.18:1です。09:19 OK 再送に成功：OKのラベルを深緑#166534にすると、背景#F8FAFCとの比率は約6.81:1です。
エラーを探すために行へ淡い黄色#FEF3C7を敷く場合、通常の濃い文字#1F2937との比率は約13.18:1、エラーの赤文字#B91C1Cとは約5.81:1です。ただし黄色の行と通常の背景#F8FAFCの差は約1.06:1しかありません。黄色い帯だけで重要さを伝えず、ERRORという文字や「再試行が必要」といった説明も残します。
選択行・検索結果・スマホ表示まで確認する
検索した行や選択中の行に淡い青#DBEAFEを敷く場合、通常の文字#1F2937との比率は約12.03:1です。しかし選択色と元の背景#F8FAFCは約1.17:1と近いため、「選択中」の表示や枠線など、色以外の目印を足します。例えば青いフォーカス枠#1D4ED8なら選択行#DBEAFEと約5.49:1、元の背景#F8FAFCと約6.41:1です。フォーカスとはキーボード操作の対象位置を示す表示です。
スマートフォンでは1行が長くなりすぎないよう、時刻と種別を先頭に残して内容を折り返すなどの調整が必要です。警告やエラーだけを表示する絞り込み機能を付けるなら、選択した条件を文字でも表示します。検索で一致した文字列も色だけで強調せず、見つかった件数や移動先を示すと確認しやすくなります。
HueRollではHEX（色を16進数で指定するカラーコード）で色を選び、選択色と白・黒とのコントラスト比を確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定には対応していません。ここで示したログ背景と各文字色の組み合わせは別途計算した値です。実際の画面でも、すべての重要な文字と操作状態を確認しましょう。