テック技報最新号へ →
デザイン

文字だけでなく、ボタンや入力欄の枠などUI部品にも背景との3:1のコントラストを確保する

テキストのコントラストばかり注目されるが、操作できる部品や状態を示す図形も3:1が必要。足りなければ、濃い枠線を1本足すだけで直ることが多い。

@AdhamDannaway · 2026-10-16
#UI#アクセシビリティ#コントラスト#WCAG#ボタン#フォーム

どんな問題を解決するか / いつ使うか

背景とボタンの色が近くて「これ押せるの？」と迷うサイト、薄いグレーの枠だけの入力欄。コントラストが足りないと、多くの人には部品自体が見えない。目立たせたい所ほどコントラストは強めでいい。

やり方

  • 対象：ボタンの形、入力欄の枠、チェックボックスやラジオ、トグル、フォーカス表示、意味のあるアイコン、グラフの線など。
  • 基準：隣り合う色との比が 3:1 以上（WCAG 2.x の 1.4.11 非テキストのコントラスト）。本文の文字は 4.5:1。
  • 直し方の例：
css
/* 背景と同化しやすい入力欄に、はっきりした枠を足す */
.input {
  background: #fff;
  border: 1px solid #767676;   /* 白背景に対して約4.5:1 */
}
.input:focus-visible {
  outline: 2px solid #1a56db;
  outline-offset: 2px;
}
  • Figma ではコントラストチェック用のプラグイン、ブラウザでは開発者ツールのカラーピッカーで比を確認する。

注意点

  • 塗りのボタンなら、ボタンの塗りと背景の比が3:1あればよい。塗りが薄いなら枠で補う。
  • 無効状態（disabled）の部品は基準の対象外だが、無効と分かる表示は必要。
  • AIに作らせるUIは薄いグレーの枠を多用しがちなので、ルールファイルに「UI部品は背景と3:1以上」と書いておく。

出典

X の元の投稿を開く