環境（OS・言語・視力・入力手段）の違いを設計の前提に置く。最低限守る基準は次のとおり。

項目	基準
コントラスト	本文は WCAG AA 相当を満たす
タップ / クリック領域	最小 48 × 48（モバイル）。情報密度を上げても当たり判定は縮めない
状態の伝え方	色だけに頼らず、色＋形（アイコン・文言）で示す
キーボード操作	フォーカス位置が常に明確に見えること

フォーカスリング

フォーカスリングに青は使わない。 ブランドの「青を使わない」方針はプロダクト UI にも及ぶ。ブラウザや OS が既定で描く青いリングは、ブランド側の色で上書きする。

項目	値
色	ブランドのメインカラー #F14C00（ライト・ダーク共通）
太さ	2px
リングと要素の間隔	2px（背景色で抜く）
形	対象要素の角丸に沿わせる

この仕様の理由:

• 色をモードで変えない — 「フォーカスの色」という手がかりが環境で揺れないようにする。#F14C00 は明るい背景でも暗い背景でも、隣接色との比が 3:1（WCAG の非テキスト要素の基準）を上回る
• 2px の隙間を空ける — メインカラーはボタンの塗りにも使うため、隙間がないとオレンジのボタンの上でリングが同化する
• 色だけに頼らない — 薄い背景の上ではコントラストの余裕が小さい（白の上で約 3.6:1）。色・太さ・隙間の 3 つで判別できる状態を保つ

守ること:

• この色はセマンティック層に「フォーカス表示の色」として 1 つだけ持たせる。画面ごとに色を選ばせない
• 既定のフォーカスリングを消す（outline: none）場合は、必ず同等以上の代替表示を用意する。消しっぱなしにしない

実装は追随中。 現状の実装にはフォーカスリングが古い青のまま残っている箇所がある。この表の値が正で、実装側を順次追随させる。