PrimaryとSecondaryボタンを色でどう分ける？SaaS UIの基本
SaaSの管理画面で「招待を送信」と「キャンセル」が同じ濃さのボタンになっていると、どちらを先に押すべきか迷いやすくなります。だからといって、それぞれを派手な別の色にする必要はありません。ボタンが担う役割を先に決め、塗りつぶしと輪郭を使い分ければ、色数を抑えながら操作の優先順位を伝えられます。ここではメンバー招待画面を例に考えます。
Primaryは主操作、Secondaryは補助操作として役割を分ける
SaaS（Software as a Service：インターネット経由で利用するソフトウェアサービス）のUI（ユーザーインターフェース：画面と操作の仕組み）では、Primary（プライマリー）をその場で最も進めてほしい操作、Secondary（セカンダリー）をそれ以外の補助操作として扱う方法があります。これは画面内の役割分担の例で、全サービスに共通するボタン色の規格ではありません。
チームにメンバーを招く入力画面なら、メールアドレスと権限を確認して実行する「招待を送信」がPrimary、招待せず画面を閉じる「キャンセル」がSecondaryです。色を選ぶ前に、押した後に何が起きるかを短い文言にします。「OK」「戻る」のように意味を推測させる言葉だけにしないことが重要です。
同じ画面の2つのボタンを、どちらも濃い塗りつぶしにすると優先順位が伝わりにくくなります。一方を背景を塗ったボタン、もう一方を白地に輪郭を付けたボタンにすれば、色相（青や緑などの色の種類）を増やさなくても違いを作れます。案内や取消しに赤を使う必要はなく、赤は入力エラーなど別の意味のために残せます。
招待画面の2つのボタンを同じ青緑で整える配色例
画面外側の背景を淡い青灰色#F8FAFC、招待フォームを白#FFFFFF、見出しと入力した内容を濃いグレー#1F2937にします。白地と本文文字のコントラスト比（色同士の相対的な明るさの差）は約14.68:1、ページ背景と本文文字は約14.03:1です。補足説明を青灰色#475569にしても白#FFFFFFに対して約7.58:1あります。
Primary「招待を送信」：濃い青緑#155E75で背景を塗り、文字を白#FFFFFFにします。文字とボタンのコントラスト比は約7.27:1、ボタンとページ背景#F8FAFCも約6.95:1です。濃い面をこの画面の主操作に限定します。
Secondary「キャンセル」：背景は白#FFFFFFのままにし、文字はPrimaryと同じ青緑#155E75、輪郭は青灰色#64748Bにします。文字と白の比率は約7.27:1、輪郭と白は約4.76:1です。輪郭は淡いページ背景#F8FAFCに対しても約4.55:1あります。文字色をまったく別の色にしなくても、塗りつぶしの面積で役割を区別できます。
以下は色の使い方を示す操作できない見た目の例です。実際のSaaS画面では、適切なボタン要素として実装します。
招待を送信キャンセル
WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）のレベルAAでは、通常サイズの文字は背景との比率が原則4.5:1以上です。操作部品を識別するために必要な輪郭などの非テキスト情報は、隣接色と原則3:1以上が求められます。ここで挙げた比率は色の組み合わせを計算したもので、ボタンの形や配置を含めた画面全体の適合を保証するものではありません。HEXとは色を16進数のコードで指定する形式です。
ホバー・フォーカス・入力エラーでも優先順位を保つ
マウスを重ねたとき（ホバー）は、Primaryを少し濃い青緑#0F4A5Eに変えれば白文字#FFFFFFとの比率は約9.72:1です。Secondaryにはごく淡い青#EEF6FAを敷く例があり、青緑の文字#155E75との比率は約6.64:1です。ただしその淡い青#EEF6FAと白#FFFFFFの差は約1.09:1だけなので、輪郭とボタンの文字を残し、色の変化だけで操作対象を示さないようにします。
キーボードでTabキーを押したときの操作位置は、フォーカスという別の状態です。両方のボタンの外側に、白い隙間を空けた紫#6D28D9の輪郭を出す例があります。紫と白#FFFFFFの比率は約7.10:1、紫と淡いページ背景#F8FAFCは約6.79:1です。Primaryの青緑と輪郭の紫を直接隣接させず、輪郭の太さや周囲との境界も確認してください。
メールアドレスが正しくない場合には、白いフォーム#FFFFFFに濃い赤#B91C1Cで「メールアドレスを確認してください」と説明すると、文字の比率は約6.47:1です。エラーを知らせるためにPrimaryそのものを赤くする必要はありません。「送信中」や送信後の結果は文字でも知らせ、二重送信を防ぎます。招待メールの受付と、相手が招待を承諾したことは別の状態です。
スマートフォンでは2つのボタンを縦に並べても構いませんが、どちらが主操作か分かる塗り分けを維持し、押し間違えない間隔を確保します。HueRollではHEXコードで色を選び、選択色と白・黒とのコントラストを確認できます。ただし任意の2色同士の比較やWCAGのAA・AAA自動判定はできません。今回はフォーム・ボタン・輪郭の色を別途計算し、実際の操作状態に合わせて確認することを前提にしています。