無効ボタンの色はどうする？押せないことが伝わるWEBデザイン

WEBサイトの無効ボタンは、薄いグレーにするだけで十分でしょうか。押せるボタンと見分けられても、なぜ押せないのか分からなければ利用者は先に進めません。また、色だけを変えて見た目を無効にしても、実際にはクリックできてしまう場合があります。ここではレンタサイクルの予約フォームを例に、ボタンの色、説明文、実際の無効状態を一緒に設計する方法を紹介します。

無効ボタンは薄さよりも、押せない理由と状態を伝える

無効ボタンとは、画面に表示されていても現在は操作できないボタンです。例えば貸出日と車種の選択が必要なら、ボタンのそばに「利用日と車種を選ぶと進めます」と説明します。有効な操作は目立つ色と明確な文字、無効な操作は控えめな色と理由の説明で区別します。押せないことを色だけで表すのは避けましょう。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、レベルAAの通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上、操作に必要な非テキストの視覚情報は隣接色と3:1以上のコントラストが求められます。ただし、実際に操作できない無効な部品とその文字には、これらのコントラスト基準の例外があります。例外だから極端に読みにくくするのではなく、可能な範囲でボタン名を読める色にしておくと、何の操作が待機中なのか理解しやすくなります。

実装では、HTML（WEBページの要素を記述する言語）のボタンに disabled 属性を付けると、通常は操作できず、キーボードのTabキーで移動する順番からも外れます。一方、aria-disabled="true" は支援技術へ無効状態を伝える指定で、それだけではクリックやキーボード操作を止めません。後者を使う場合は動作の停止も実装する必要があります。

レンタサイクルの予約フォームで使い分ける配色例

利用日と車種を選んでから、予約内容の確認へ進むページを想定します。HEXはWEBで色を指定する16進数のコードです。すべての色を灰色にせず、入力・選択・無効・有効という状態別に役割を決めます。

• ページ背景と本文：オフホワイト■#F7F8F5にチャコール■#26343Dで説明を書きます。文字と背景のコントラスト比は約12.01:1です。見出しを深い青■#20576Bにすると約7.47:1です。
• 入力フォームのカード：白■#FFFFFFの面にチャコール■#26343Dで項目名を書くと約12.80:1です。白■#FFFFFFと周囲のオフホワイト■#F7F8F5は約1.07:1しか違わないため、グレー■#75858Eの枠線を使います。枠線と白■#FFFFFFは約3.82:1です。
• 利用日・車種の選択欄：入力欄の白■#FFFFFFにグレー■#75858Eの輪郭を付けます。枠線と白は約3.82:1、ページ背景■#F7F8F5とは約3.58:1です。項目名を表示し、未選択なら「利用日を選択してください」と文字でも伝えます。
• 選択済みの車種：淡い青緑■#E5F0F0にチャコール■#26343Dで車種名を載せると約11.00:1です。選択を示す輪郭には深い青■#20576Bを使うと、この面に対して約6.85:1です。「選択中」の文字やチェックマークも併用します。
• ボタンが押せない理由：説明文「利用日と車種を選ぶと進めます」をグレー青■#52636Aでオフホワイト■#F7F8F5に表示すると約5.88:1です。説明はボタンの近くに置き、見落としにくくします。
• 無効な「予約内容を確認する」ボタン：背景を淡いグレー■#D8DFE0、文字を濃いグレー■#4E5E66にします。文字とボタンは約4.99:1、ボタンとページ背景■#F7F8F5は約1.27:1です。無効ボタン自体にこれらの数値が義務付けられているわけではありませんが、ボタン名を消さず控えめに見せる一例です。
• 選択完了後の有効ボタン：利用日と車種がそろったら、深い青緑■#165F75の背景に白■#FFFFFFで「予約内容を確認する」と表示します。文字は約7.17:1、ボタンとオフホワイト■#F7F8F5は約6.73:1です。色だけでなく実際の操作も有効に切り替えます。
• 貸出不可の車種：押せないボタンを並べる代わりに、貸出一覧の中で「貸出不可」と文字で示します。案内面の淡いグレー緑■#EDF2EFにチャコール■#26343Dを合わせると約11.30:1です。案内欄と周囲のオフホワイト■#F7F8F5は約1.06:1と近いので、必要な枠線や余白も加えます。

この例では、無効と有効のボタンは同じ名称でも、操作できる条件と見た目が変わります。色の違いだけではなく、先に必要な選択があることを説明するのがポイントです。

無効にする必要があるか、操作方法も含めて確認する

無効のまま理由が分からず、修正すべき項目も見つからないフォームは避けましょう。未入力のままボタンを押し、該当する項目にエラーと修正方法を表示する設計も選択肢です。操作を無効にする場合は、条件を満たしたら適切に有効化し、処理中には「確認中」などの状態を文字でも伝えます。

disabled を使ったボタンは通常のTab移動では見つけにくくなるため、利用者が無効の理由を発見できる場所に説明文を置きます。aria-disabled="true" によってキーボードから見つけられる状態を残す設計もありますが、その場合はクリック・Enter・Spaceなどで処理されないよう制御が必要です。見た目だけを薄くした「無効風ボタン」は作らないでください。

スマートフォンとキーボード操作で、未選択・選択済み・貸出不可・処理中を実際に切り替えて確認します。HueRollでは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。この記事で示した色同士の比率は別途計算しました。