ライト・シャルトリューズに合う色は？明るい黄緑を軽快に見せる配色例【#BDF288】

ライト・シャルトリューズ（■#BDF288）は、黄色に近い明るい黄緑です。工場設備の点検チェックリスト画面では、今日の点検対象や主要な「点検を完了」ボタンなど、次の操作が必要な場所へ絞って使うと、黄緑の明るさを活かしながら、設備名や点検時刻、担当者、注意事項を整理しやすくなります。ここでは、ディープオリーブ、ソフトアイボリー、ミューテッドインディゴを組み合わせます。

ディープオリーブで黄緑を締め、明るい背景と紫系で役割を分ける

■#BDF288には、点検状況をまとめるパネル用のディープオリーブ■#343820、設備一覧や点検項目カードの背景用のソフトアイボリー■#FAF8F2、履歴確認や担当変更などの補助操作用のミューテッドインディゴ■#5A4A6Eを合わせる例が考えられます。

■#343820は黄緑寄りの暗い低彩度色で、ライト・シャルトリューズの明るさを残しながら文字や輪郭を引き締められます。■#FAF8F2は少し黄みを含む明色なので、設備名、点検項目、時刻、担当者など情報量の多い面を軽く保てます。■#5A4A6Eは紫寄りの落ち着いた濃色で、黄緑から色相（赤・青・緑など色みの違い）を離しながら、「過去の点検を見る」「担当者を変更」などの補助操作を主要な完了操作と分けやすくします。

設備点検では、ライト・シャルトリューズを今日の対象と主要操作に集める

設備一覧と点検項目カードの背景を■#FAF8F2にし、設備名、点検時刻、担当者、注意事項を■#343820で表示します。この組み合わせのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約11.41:1です。

今日の点検対象をまとめるサマリーパネルを■#343820にし、主要な「点検を完了」ボタン背景、今日の日付、残り件数の短いアクセントへ■#BDF288を使います。ボタン上の文字とアイコンを■#343820にするとコントラスト比は約9.36:1で、通常サイズの文字に必要な4.5:1以上を確保できます。明るい黄緑のボタン面とディープオリーブのパネルも約9.36:1あるため、暗い面の中で主要操作を区別できます。

一方、■#FAF8F2のカード上で、今日の点検対象を■#BDF288だけで塗ると、2色のコントラスト比は約1.22:1です。色面だけでは状態を十分に識別しにくいため、■#343820の枠線、「本日点検」の文字、チェックリストアイコンを併用します。「過去の点検を見る」「担当者を変更」などの補助ボタンは■#5A4A6Eを背景にし、その上を■#FFFFFFの文字にすると約7.96:1です。ミューテッドインディゴとソフトアイボリーの差も約7.49:1あります。

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

軽快に見せるなら、白文字や色だけの点検状態に頼らない

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

また、「未点検」「点検中」「完了」「再確認」などを色だけで区別せず、状態名の文字、点検時刻、担当者名、チェックや注意アイコンを併用します。HueRollでは■#BDF288をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。