ボタンのCSSを作る
よくある質問
ボタンは何ピクセルの大きさにすればいいですか？
1つの答えはありません。WCAG 2.2のSC 2.5.8 Target Size (Minimum)はレベルAAで24×24CSSピクセル、同じWCAGのSC 2.5.5 Target Size (Enhanced)はレベルAAAで44×44CSSピクセルを求めています。AppleのHuman Interface GuidelinesはiOSの既定の操作部品を44×44ポイント、GoogleのAndroid向けの案内は48×48dpを勧めています。単位も立場も違うので、どれか1つが正解というわけではありません。この道具は、単位が同じCSSピクセルのWCAGの2つだけを合否の線に使い、AppleとGoogleの数は参考として単位つきで並べています。
24×24より小さいボタンは、絶対に作ってはいけないのですか？
SC 2.5.8には例外が5つあり、そのうち「Spacing」は小さいままでも認めています。条文は、小さい対象それぞれの外形に直径24CSSピクセルの円を重ねて、その円が他の対象や他の円と交わらなければよい、と書いています。つまり大きさが足りないぶんを、まわりの空きで埋めてよいということです。ほかに、同じページに大きい同等の操作部品がある場合、文章の中に入っているリンク、ブラウザが決めた大きさをそのまま使っている場合、その見せ方でなければならない場合も例外です。
Appleの44ポイントは最小の大きさですか？
違います。AppleのHuman Interface Guidelinesのアクセシビリティの節には、プラットフォームごとに「Default control size（既定の大きさ）」と「Minimum control size（最小の大きさ）」を並べた表があり、iOSとiPadOSは既定が44×44ポイント、最小は28×28ポイントです。よく引かれる44は既定の欄の数で、最小の欄の数ではありません。macOSは既定28・最小20、tvOSは既定66・最小56、visionOSは既定60・最小28、watchOSは既定44・最小28です。
outline: none でフォーカスの枠を消してもいいですか？
やめてください。WCAG 2.2のSC 2.4.7 Focus VisibleはレベルAAで、キーボードで操作できる部品には焦点の位置が見える状態がなければならないと定めています。枠を消すと、マウスを使わない人は自分がいまどのボタンにいるのか分からなくなります。見た目が気に入らないときは、消すのではなく作り直してください。この道具は:focus-visibleの指定を必ず書き出します。
文字と背景のコントラスト比はいくつ必要ですか？
WCAG 2.2のSC 1.4.3 Contrast (Minimum)はレベルAAで4.5:1を求めています。ただし「大きな文字」は3:1に下がります。大きな文字の定義は18ポイント以上、太字なら14ポイント以上で、W3Cの解説文書が1ポイント＝1.333CSSピクセルと書いているので、CSSピクセルではおよそ24px以上、太字なら18.5px以上になります。この道具は、いま選んでいる色と文字の大きさから、どちらの線が当てはまるかを判断して比を出します。
角丸を大きくすると押しにくくなるというのは本当ですか？
本当です。CSS Backgrounds and Borders Module Level 3は、背景もはみ出した中身もポインタのイベントも角の曲線で切り取ると定めていて、削れた角の外側はクリックにもタップにも反応しません。仕様自身が、border-radiusは要素の操作できる面積を減らすので残った面積が推奨される最小のタップ領域を満たすか確かめるべきだ、と注意しています。カプセル形のボタンは、見た目の四角形より実際に押せる面積が小さくなります。
入力したものはどこかに送られますか？
送られません。ボタンの文字も色も、この画面を開いているブラウザの中だけで計算しています。サーバーへ送る処理も、保存する処理もありません。このサイトのページはすべて先に作り置きしてある静かなページで、計算はあなたの端末で動いています。
つまみを動かすと、そのまま貼れるCSSが出ます。 あわせてそのボタンが押せる大きさかどうかとその色で文字が読めるかどうかを、その場で計算して文字でお知らせします。
「押せる大きさ」の正解は、1つではありません
ボタンを作るときにいちばん迷うのが大きさです。調べると24・44・48という3つの数が出てきて、しかもどれも間違っていません。決めた組織が違い、使っている単位まで違うからです。
| 決めたところ | 数と単位 | 立場 |
|---|---|---|
| W3CWCAG 2.2 SC 2.5.8 Target Size (Minimum) | 24×24CSSピクセル | AA |
| W3CWCAG 2.2 SC 2.5.5 Target Size (Enhanced) | 44×44CSSピクセル | AAA |
| AppleHuman Interface Guidelines（Accessibility・Mobility） | 44×44ポイント | 指針 |
| GoogleAndroid のアクセシビリティ指針（Material Design） | 48×48dp | 推奨 |
表が入りきらないときは、表の上で横に動かせます（キーボードでも動きます）。
ここで大事なのは、この4つを並べて大小を比べてはいけないということです。 CSSピクセル・ポイント・dpは、それぞれ別の組織が別の目的で決めた長さです。 だからこの道具は、合否の線に使うのはCSSピクセルで書かれたWCAGの2つだけにしています。あなたが書いているのはCSSなのだから、単位が同じものとだけ突き合わせるのが筋だからです。
WCAGの24は「離れていればもっと小さくてもよい」
SC 2.5.8 Target Size (Minimum)はレベルAAで、24×24CSSピクセルを求めています。ところがこの条文には例外が5つあって、1つめの「Spacing」が面白いところです。
条文はこう言っています ── 小さい対象それぞれの外形に直径24CSSピクセルの円を重ねてみて、その円が他の対象や他の円と交わらなければよい。 つまり大きさが足りないぶんは、まわりの空きで埋めてよいわけです。 24という数は「ボタンの大きさ」ではなく、「指1本ぶんの縄張り」を測るための円の直径だった、と読み替えると腑に落ちます。
SC 2.5.5 Target Size (Enhanced)のほうは44×44CSSピクセルで、レベルAAAです。 AAAは「満たせば手厚い」段で、AA適合の必須条件ではありません。 44に届かなくても規格違反ではない、というのはここです。
Appleの44は「最小」ではなく「既定」でした
これがこのページでいちばんの「へえ」です。「Appleは44×44ポイントが最小」と書いてある記事はたくさんありますが、Apple自身のページを開くと表になっていて、欄が2つあります。
| プラットフォーム | 既定の大きさ | 最小の大きさ |
|---|---|---|
| iOS・iPadOS | 44×44 pt | 28×28 pt |
| macOS | 28×28 pt | 20×20 pt |
| tvOS | 66×66 pt | 56×56 pt |
| visionOS | 60×60 pt | 28×28 pt |
| watchOS | 44×44 pt | 28×28 pt |
よく引かれる44は「Default control size」の欄の数で、 同じ行の「Minimum control size」は28×28ポイントです。44は最小値ではありませんでした。Appleは同じ場所で「部品どうしのすきまは大きさと同じくらい大事だ」とも書いていて、枠のある部品なら約12ポイント、枠のない部品なら約24ポイントの余白を まわりに取るとよい、と続けています。WCAGの「Spacing」の例外と、言っていることは同じです。
Googleの48は、指の大きさから決まっています
Googleの案内は48×48dpです。ここが親切なのは、なぜその数なのかまで書いてあるところです。
「48×48dpは実際の大きさで約9ミリになる」「指で狙う対象として勧められるのは7〜10ミリ」── つまり画面の都合ではなく、体のほうから決めた数だと言っています。 Googleはさらに、近すぎて広げられない小さなボタンについては8dp以上あけることを勧めています。ここでもまた「すきま」が出てきます。
3つの決まりを並べて見えてくるのは、どれも同じことを別の言い方で言っているということです。指は点ではなく、10ミリ近い面で画面に触れる。だから大きくするか、離すか、どちらかをしなさい── 数が違うのは、それをどの単位で、どこまで厳しく言うかの違いでした。
この道具には「フォーカスの枠を消す」つまみがありません
ボタンを作る道具でいちばん危ないのがoutline: noneです。 押していないときに出る枠が邪魔に見えるので、消したくなります。この道具は、それを出せないように作ってあります。
枠を消して困るのは、マウスを使わない人です。 キーボードのTabキーでボタンからボタンへ移る人にとって、あの枠は「いま自分はここにいる」という唯一の目印です。 消すと、画面の中で迷子になります。WCAG 2.2のSC 2.4.7 Focus VisibleがレベルAAで 「キーボードで操作できる部品には、焦点の位置が見える状態がなければならない」と定めているのは、 このためです。
だから「消す」ではなく「作り直す」のが正しい直し方です。 この道具が書き出す枠は黄色と黒の2重になっています。黄色は白い地の上では1.5:1しかなく、それだけでは浮きません。外側に黒を重ねてあるので、明るい画面では外側の黒が、暗い画面では内側の黄色が必ずどちらか浮きます。 このサイト自身のフォーカスの枠も、同じ考え方で作ってあります （デジタル庁デザインシステム（新しいタブで開きます）の考え方に合わせています）。
上の見本のボタンは本物のbutton要素です。Tabキーを押して、枠が出るところを見てみてください。消したくなる気持ちと、消されたときに困る人のことを、同時に見られます。
色だけで「小さすぎる」とは言いません
この道具は、大きさが足りないときに赤くする代わりに、文字で書きます。WCAG 2.2のSC 1.4.1 Use of Color（レベルA）が 「色を、情報を伝える唯一の方法として使ってはならない」と定めているからです。
色が見分けにくい人にとって、赤い枠と緑の枠は同じ枠です。 だからこの道具は✓・△・✕という印と、「満たしている」「足りていません」という言葉を必ず添えています。 印だけでも足りません ── 読み上げは印を読まないことがあるので、 意味は必ず言葉の側に持たせます。
コントラスト比は、色みではなく明るさで決まります
文字色と背景色のコントラスト比も、その場で計算しています。SC 1.4.3 Contrast (Minimum)はレベルAAで4.5:1を求めていて、「大きな文字」だけ3:1に下がります。
「大きな文字」の定義は18ポイント以上、太字なら14ポイント以上。 W3Cの解説文書が「1ポイント＝1.333CSSピクセル」と書いているので、 CSSピクセルに直すとおよそ24px以上、太字なら18.5px以上になります。太字にするだけで線が下がるので、上のつまみで太さを切り替えると 合否がひっくり返ることがあります。
比の計算に使うのは明るさ（相対輝度）だけで、色み（赤か青か）は入っていません。 だからまったく違う色どうしでも、明るさが近ければ読みにくいのです。 いちばん離れた組み合わせが黒と白の21:1で、 これがコントラスト比の上限です。同じ色どうしなら1:1になります。
なお、この道具が見ているのはボタンの中の文字と背景の比だけです。ボタンそのものが、まわりの地から見分けられるかは別の決まり （SC 1.4.11 Non-text Contrast・レベルAA・3:1）で、どんな色のページに置くかが決まらないと計算できません。 薄い色のボタンを白い地に置くときは、そちらも確かめてください。
影の薄さは、不透明な1色で作っています
影を付けると、たいていの道具はrgbaのような透明な色を使います。この道具は使いません。ボタンの色を黒へ寄せた、不透明な1色で作っています。
理由は「うしろに何があるか分からない」からです。 透明な色は、下に敷かれたものの色と混ざって見え方が変わります。 せっかく4.5:1ありますと計算して出した比が、貼った先の画面では違う値になっているということが起こります。色そのもので作れば、どこに置いても宣言したとおりの色です。
数の出どころ
このページに出てくる数は、すべて決めた組織のページを開いて確かめました。まとめ記事は1本も使っていません。条文の言い回しまで載せておくので、疑わしいときは原文と見比べてください。
- W3C（24CSSピクセル）
- W3C・WCAG 2.2（SC 2.5.8）（新しいタブで開きます）「The size of the target for pointer inputs is at least 24 by 24 CSS pixels」。ただし例外が5つあり、そのうち「Spacing」は、小さいままでも十分に離れていればよいと認めている。
- W3C（44CSSピクセル）
- W3C・WCAG 2.2（SC 2.5.5）（新しいタブで開きます）「The size of the target for pointer inputs is at least 44 by 44 CSS pixels」。レベルAAAなので、満たせば手厚いが、AA適合の必須条件ではない。
- Apple（44ポイント）
- Apple・Human Interface Guidelines（Accessibility）（新しいタブで開きます）iOS・iPadOS の「Default control size」の欄の数。同じ表の「Minimum control size」の欄は28×28ポイントで、44は最小値ではない。macOSは既定28・最小20、tvOSは既定66・最小56、visionOSは既定60・最小28、watchOSは既定44・最小28。
- Google（48dp）
- Google・Android Developers（Make apps more accessible）（新しいタブで開きます）「we recommend that each interactive UI element have a focusable area, or touch target size, of at least 48dpx48dp」。Google 自身は「48×48dp は実寸で約9ミリになる。指で狙う対象として勧められるのは7〜10ミリ」と、体の側から理由を書いている。
フォーカスの枠（SC 2.4.7）・色の使い方（SC 1.4.1）・コントラスト比（SC 1.4.3 と SC 1.4.11）も、同じW3CのWCAG 2.2（新しいタブで開きます）の条文です（2023年10月5日に勧告、いま出ている版は2024年12月12日）。 ポイントとCSSピクセルの換算はW3Cの解説文書（Understanding SC 1.4.3）（新しいタブで開きます）、角丸で押せる面積が減る話はW3CのCSS Backgrounds and Borders Module Level 3（新しいタブで開きます）から取りました。