ライト・スプリンググリーンに合う色は？みずみずしい緑を爽やかにまとめる色合わせ【#95F288】

ライト・スプリンググリーン（■#95F288）は、黄みを含んだ明るくみずみずしい緑です。図書館の貸出・返却期限管理画面では、「返却期限が近い本」や主要な「貸出を延長」ボタンなど、次に確認してほしい場所へ絞って使うと、爽やかさを保ちながら書名、返却日、貸出状況を整理しやすくなります。ここでは、ディープモス、ペーパーアイボリー、ミューテッドプラムを組み合わせます。

ディープモスで輪郭を作り、明るい背景とプラムで情報を整理する

■#95F288には、貸出状況をまとめるパネル用のディープモス■#1B3928、書籍カードや返却予定一覧の背景用のペーパーアイボリー■#FAF8F2、予約確認や貸出履歴などの補助操作用のミューテッドプラム■#68465Eを合わせる例が考えられます。

■#1B3928は緑寄りの暗い低彩度色で、ライト・スプリンググリーンの軽さを残しながら文字や輪郭を引き締められます。■#FAF8F2はわずかに黄みを含む明色なので、書名、著者名、返却日、貸出館など情報量の多い面でも背景を重くしにくい色です。■#68465Eは赤紫寄りの落ち着いた濃色で、緑から色相（赤・青・緑など色みの違い）を離しながら、「予約内容を見る」「貸出履歴を確認」などの補助操作を主要な延長操作と分けやすくします。

貸出管理では、ライト・スプリンググリーンを期限確認と主要操作に集める

書籍カードと返却予定一覧の背景を■#FAF8F2にし、書名、返却日、貸出館、補足説明を■#1B3928で表示します。この組み合わせのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約11.89:1です。

返却期限が近い本をまとめるサマリーパネルを■#1B3928にし、主要な「貸出を延長」ボタン背景、期限までの日数、対象冊数の短いアクセントへ■#95F288を使います。ボタン上の文字とアイコンを■#1B3928にすると約9.22:1で、通常サイズの文字に必要な4.5:1以上を確保できます。明るい緑のボタン面とディープモスのパネルも約9.22:1あるため、暗い面の中で主要操作を区別できます。

一方、■#FAF8F2の書籍カード上で、期限が近い行を■#95F288だけで塗ると、2色のコントラスト比は約1.29:1です。色面だけでは状態を十分に識別しにくいため、■#1B3928の枠線、「あと3日」などの文字、カレンダーアイコンを併用します。「予約内容を見る」「貸出履歴を確認」などの補助ボタンは■#68465Eを背景にし、その上を■#FFFFFFの文字にすると約8.00:1です。ミューテッドプラムとペーパーアイボリーの差も約7.53:1あります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上が必要です。また、意味のあるUI（ユーザーが操作するボタンや状態表示などの画面部品）を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。

爽やかに見せるなら、白文字や色だけの期限表示に頼らない

■#95F288と■#FFFFFFのコントラスト比は約1.37:1なので、ライト・スプリンググリーン背景へ通常サイズの白文字を置く用途では4.5:1へ届きません。この例では主要ボタンの文字を■#1B3928にします。

また、「返却期限が近い」「延長済み」「返却済み」「予約中」などを色だけで区別せず、状態名の文字、日付、残り日数、チェックやカレンダーアイコンを併用します。HueRollでは■#95F288をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。