金糸雀色と紺色はどう合わせる？ボタンと背景の配色例

金糸雀色と紺色は、明るい黄色と深い青を組み合わせる配色です。2色の明暗差は大きいものの、背景とボタンのどちらに黄色を使うかで、画面の印象や目立つ場所が変わります。告知ページの大きな見出し部分と、Webサイトのお知らせ欄を例に、文字色まで含めた組み合わせを紹介します。

金糸雀色と紺色は、どちらを広く使うかで決める

金糸雀色（かなりあいろ）は、カナリアを表す「金糸雀」の名を持つ明るい黄色です。紺色（こんいろ）は深みのある青色です。和色大辞典の色見本では、金糸雀色を■#EBD842、紺色を■#223A70としています。HEX（16進数でWebの色を指定するコード）を使えば、色名の解釈に頼らず配色を再現できます。

この黄色と紺色のコントラスト比（隣り合う2色の明るさの差）は約7.57:1です。そのため、紺色の背景に黄色いボタンを置く方法も、黄色い面に紺色のボタンを置く方法も考えられます。ただし、黄色■#EBD842と白■#FFFFFFの比は約1.45:1です。黄色いボタンの文字は白にせず、濃い紺色を使います。

背景とボタンを入れ替えた2つの配色例

イベントの告知ページ：紺色の背景に黄色い申込みボタン

イベント紹介の大きな見出し部分は、背景を紺色■#223A70にし、タイトルを温かみのあるオフホワイト■#F8F7F2にします。背景とタイトルのコントラスト比は約10.27:1です。日時や会場は短い段落にまとめ、申込みボタンだけを金糸雀色■#EBD842で塗ります。黄色を小面積にすると、濃い青の中で申込み先を見つけやすい構成になります。

ボタンの文字には紺色■#223A70を使います。文字と黄色いボタンの比、ボタンと紺色の周囲との比は、どちらも約7.57:1です。ボタンの周りに適度な余白を取り、「申し込む」と動作が分かる文字を入れましょう。黄色い装飾を何か所にも増やすとボタンと競合するため、黄色は申込みを優先して使うのが一案です。

サービスサイトのお知らせ欄：黄色い面に紺色のボタン

通常のページはオフホワイト■#F8F7F2を背景にし、本文には濃いグレー■#26343Cを使います。本文と背景の比は約11.95:1です。期間限定のお知らせだけを金糸雀色■#EBD842の横長の面にして、見出しや説明は紺色■#223A70にすると、黄色い面の上でも文字と背景の比は約7.57:1になります。

「詳細を見る」ボタンは紺色■#223A70の背景に白■#FFFFFFの文字を載せます。文字と紺色の比は約11.01:1、ボタンと黄色い周囲の比は約7.57:1です。ただし、黄色とオフホワイトの境界は約1.36:1しかありません。お知らせの領域を明確に区切る必要があるなら、紺色の枠線や見出し、十分な余白も併用してください。

文字色だけでなく、ボタンの境界と操作状態も確かめる

配色を反転させた場合でも、本文・見出し・ボタンの色をすべて交換する必要はありません。白い文字は紺色に、紺色の文字は金糸雀色に組み合わせるなど、文字と背景を一組ずつ確認します。選択中や操作中の状態は、色だけでなく枠の形や文字、キーボード操作時のフォーカス表示でも分かるようにしましょう。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常の文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。操作部品を識別するために必要な見た目の情報にも、隣接する色との3:1以上が必要な場合があります。HueRollではHEX入力から配色候補を確認し、選んだ色と白・黒のコントラストを比較できます。ただし任意の2色間の比率やAA・AAAの自動判定は行わないため、完成画面は別途検証してください。