12pxをremに変換 — 最小可読サイズ

12px = 0.75rem

12 / 16 = 0.75rem

12pxは一般的にWebコンテンツの最小可読サイズとされ、一部のブラウザでは下限として強制されています。

ブラウザの最小フォントサイズ

Chromeなど一部のブラウザには最小フォントサイズ設定があります（CJKロケール（中国語、日本語、韓国語）ではデフォルトで12pxであることが多い）。font-size: 0.5rem（8px）を設定しても、ブラウザは12pxでレンダリングする場合があります。この動作はブラウザにより異なります：

• Chrome（CJK） — デフォルトで12px最小を強制
• Chrome（ラテン文字） — デフォルトでは強制最小なし、ユーザー設定可能
• Firefox — 設定で最小値を設定可能
• Safari — 強制最小なし、ただし12px未満はRetinaディスプレイで読みにくい場合あり

12pxが使用される場面

• 注意書き — 法的免責事項、著作権表示
• バッジとラベル — 小さなカテゴリタグ、ステータスインジケーター
• パンくずリスト — ナビゲーションパンくずテキスト
• 脚注 — 学術的またはドキュメントの脚注
• チャート軸ラベル — データ可視化の目盛りラベル

アクセシビリティ警告

12pxは技術的に読めますが、以下のユーザーにとって課題があります：

• 低視力のユーザー
• 高齢者
• 物理的サイズがさらに小さくなる高DPIスクリーン
• 腕の長さで保持されるモバイルデバイス

WCAG 2.1の達成基準1.4.4は、機能の損失なくテキストを200%まで拡大可能であることを要求しています。0.75remを使用すると、remがルートフォントサイズでスケーリングするためこの要件を満たしますが、固定の12pxでは満たしません。

デザインシステムマッピング

フレームワーク	トークン / クラス	値
Tailwind	text-xs	0.75rem (12px)
Material UI	caption	0.75rem
Ant Design	@font-size-sm	12px

推奨事項

12px（0.75rem）は控えめに使用し、ユーザーの主要タスクに不可欠でない補足情報にのみ使用してください。十分なコントラスト（最低4.5:1）を確保し、より良い可読性のために14px（0.875rem）への引き上げを検討してください。