ブライト・ゴールドに合う色は？強い黄みを明るく軽快に見せる組み合わせ【#E7FF3D】

ブライト・ゴールド（■#E7FF3D）は、黄みが強く、明るく鮮やかな色です。ここでいう「ゴールド」は金属の光沢を再現する表現ではなく、HueRoll上の色名として扱います。品質検査ラボの試料トラッキング画面（試料の受付から検査完了までの進行状況を追う画面）では、選択中の試料、現在の工程、主要な「次の工程へ」ボタンなどに絞って使うと、強い黄みを明るく軽快に見せながら試料IDや担当者、進捗を整理しやすくなります。ここでは、ディープインク、ソフトアイボリー、ミューテッドバイオレットを組み合わせます。

ディープインクを土台にし、アイボリーとバイオレットで黄の役割を分ける

■#E7FF3Dには、画面全体や試料一覧の背景用のディープインク■#232330、試料ID・検査名・担当者・時刻などの通常情報用のソフトアイボリー■#F7F6EE、履歴表示や条件確認などの補助操作用のミューテッドバイオレット■#806B9Aを合わせる例が考えられます。

■#232330は青紫をわずかに含む暗い低彩度色で、明るいゴールドとの明度差を大きく作れます。■#F7F6EEは白に近いわずかに黄みのある明色なので、試料ID、検査条件、担当者、受付時刻などを主役色と競合させず表示できます。■#806B9Aは紫寄りの低彩度色で、黄から色相（赤・青・緑など色みの違い）を大きく離しながら鮮やかさを抑えているため、「履歴を見る」「条件を確認」などの補助操作を主要な工程操作と分けやすくなります。

試料トラッキングでは、ブライト・ゴールドを現在の工程と主要操作に使う

実装では、画面全体と未選択の試料カード背景を■#232330にし、試料ID、検査名、担当者、受付時刻などの通常情報を■#F7F6EEにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.30:1です。

選択中の試料、現在の工程ラベル、主要な「次の工程へ」ボタン背景へ■#E7FF3Dを使い、その上の文字とアイコンを■#232330にすると約13.86:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。黄の面と暗い背景の差も同じ約13.86:1あるため、主要ボタンや現在位置の視覚情報も背景から3:1以上の差を確保できます。

「履歴を見る」「条件を確認」などの補助ボタンは■#806B9Aを背景にし、その上の文字を■#FFFFFFにすると約4.68:1です。ミューテッドバイオレットと画面背景の差も約3.31:1あり、補助操作の面を暗い背景から識別するための3:1以上を確保できます。

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

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

■#E7FF3Dと■#FFFFFFのコントラスト比は約1.12:1、■#E7FF3Dと■#F7F6EEも約1.03:1です。そのため、ゴールド背景へ白やアイボリーの通常文字を置く使い方は避け、主要ボタンには■#232330の文字を使います。

また、「受付済み」「検査中」「再確認」「完了」などの工程状態をゴールドとバイオレットの色だけで表さず、工程名の文字、ステップ番号、チェックマーク、担当者名なども併用します。HueRollでは■#E7FF3DをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。