ブライト・シャルトリューズに合う色は？鮮やかな黄緑を爽快に使う配色例【#9EFF3D】

ブライト・シャルトリューズ（■#9EFF3D）は、黄色と緑の中間にある、明るく鮮やかな黄緑です。3Dプリンターのジョブ監視画面（印刷待ちや実行中の処理を管理する画面）では、選択中の印刷ジョブ、主要な「印刷を開始」ボタン、進行中のレイヤーや進捗のアクセントなどに絞って使うと、鮮やかな黄緑を爽快に見せながら造形時間や材料、プリンター状態を整理しやすくなります。ここでは、ディープグラファイト、アイスホワイト、ウォームコッパーを組み合わせます。

ディープグラファイトを土台にし、白とコッパーで黄緑の役割を分ける

■#9EFF3Dには、画面全体やジョブ一覧の背景用のディープグラファイト■#18201C、ジョブ名・材料・残り時間などの通常情報用のアイスホワイト■#F5F7F2、設定確認や履歴表示などの補助操作用のウォームコッパー■#C98952を合わせる例が考えられます。

■#18201Cは緑みをわずかに含む暗い低彩度色で、明るいシャルトリューズとの明度差を大きく作れます。■#F5F7F2は白に近い明色なので、造形時間、材料名、残り時間、温度などの通常情報を主役色と競合させず表示できます。■#C98952は赤みを含む落ち着いたコッパー色で、黄緑から色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「設定を確認」「履歴を見る」などの補助操作を主要な印刷操作と分けやすくなります。

3Dプリンターの監視画面では、ブライト・シャルトリューズを進行中ジョブと主要操作に使う

実装では、画面全体と未選択のジョブカード背景を■#18201Cにし、ジョブ名、使用材料、残り時間、ノズル温度などの通常情報を■#F5F7F2にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約15.42:1です。

選択中の印刷ジョブ、主要な「印刷を開始」ボタン背景、進行中レイヤーの短いアクセントへ■#9EFF3Dを使い、その上の文字やアイコンを■#18201Cにすると約13.33:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。黄緑の面と暗い背景の差も同じ約13.33:1あるため、主要ボタンや進行中の要素を背景から明確に分けられます。

「設定を確認」「履歴を見る」などの補助ボタンは■#C98952を背景にし、その上の文字を■#18201Cにすると約5.69:1です。ウォームコッパーと画面背景の差も約5.69:1あるため、補助操作の面も暗い背景から3:1以上の差を確保できます。

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

爽快に見せるなら、白背景や黄緑だけの状態表示に頼らない

■#9EFF3Dと■#FFFFFFのコントラスト比は約1.25:1、■#9EFF3Dと■#F5F7F2も約1.16:1です。そのため、明るい背景上で黄緑の細い線や塗りだけに重要な境界を任せたり、黄緑背景へ白の通常文字を置いたりする使い方は避けます。

また、「待機中」「印刷中」「一時停止」「完了」「エラー」などの状態を黄緑とコッパーの色分けだけで伝えず、状態名の文字、進捗率、再生・一時停止アイコン、警告記号なども併用します。HueRollでは■#9EFF3DをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。