ストロング・バーミリオンに合う色は？濃い赤橙を温かく際立たせる色合わせ【#DA590B】

ストロング・バーミリオン（■#DA590B）は、赤と橙の中間にあり、明るさと力強さを併せ持つ赤橙です。クラウドファンディングのプロジェクト支援ページでは、プロジェクト名のアクセント、支援進捗バー、主要な「このプロジェクトを支援」ボタンなどに使うと、濃い赤橙を温かく際立たせながら行動の優先順位を作りやすくなります。ただし、白文字とのコントラストは通常サイズの文字に十分ではないため、バーミリオンの面には濃い文字色を合わせるのが扱いやすい方法です。ここでは、ウォームペーパー、インクネイビー、ディープスチールブルーを組み合わせます。

ウォームペーパーを土台にし、インクネイビーで赤橙を引き締める

■#DA590Bには、背景用のウォームペーパー■#FFF7F2、本文・支援金額・主要ボタン文字用のインクネイビー■#121820、補助操作用のディープスチールブルー■#20364Fを合わせる例が考えられます。

■#FFF7F2は赤みをわずかに含む明色で、プロジェクト本文やリターン一覧を明るく保ちながらバーミリオンとのつながりを作れます。■#121820は青みを含むほぼ黒の濃色なので、目標金額、支援者数、残り日数、注意事項などを主役色より落ち着いて整理できます。■#20364Fは深い青で、赤橙から色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「活動報告を見る」などの補助操作を主要操作と分けやすくなります。

支援ページでは、ストロング・バーミリオンを進捗と主要CTAに集める

実装では、ページ全体やリターンカードの背景を■#FFF7F2にし、プロジェクト名の一部、支援進捗バー、主要なCTA（Call to Action、支援申込みなど次の行動を促す操作）の背景へ■#DA590Bを使います。その上の文字を■#121820にすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約4.60:1です。通常サイズの文字に必要な4.5:1以上を満たします。本文、目標金額、支援者数、残り日数は■#121820にし、背景の■#FFF7F2との比率は約16.85:1です。

■#DA590Bと■#FFF7F2のコントラスト比は約3.66:1なので、明るいトラック上の進捗バーや主要ボタンの面は3:1以上の差を確保できます。一方、■#DA590Bと■#FFFFFFは約3.88:1で、白の通常文字には4.5:1へ届きません。補助の「活動報告を見る」ボタンは■#20364Fを背景にし、その上の文字を■#FFFFFFにすると約12.34:1です。ディープスチールブルーとページ背景も約11.66:1あります。

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

温かさを活かすなら、支援状況を赤橙と青だけで伝えない

■#DA590Bと■#20364Fのコントラスト比は約3.18:1です。ただし、「受付中」「目標達成」「終了」といった状態をこの2色の違いだけで伝えず、状態名の文字、達成率の数値、アイコン、日付なども併用します。進捗バーでも、色の長さだけに頼らず「68%」のような数値や目標金額を近くに表示すると、状態を読み取りやすくなります。

また、プロジェクト写真に赤橙や暖色が多い場合は、ページ全体へさらに■#DA590Bを広げるより、■#FFF7F2の余白を十分に残す方が、写真と支援操作を分けやすくなります。HueRollでは■#DA590BをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。