スコア表示UXの設計：WCAG 2.2コントラスト比とaria-live

WCAG 2.2のコントラスト比基準

W3CのWeb Content Accessibility Guidelines 2.2（2023年勧告）は、テキストと背景のコントラスト比について次の基準を設けています。

• ・SC 1.4.3（AA・通常テキスト）：4.5:1 以上
• ・SC 1.4.3（AA・大きいテキスト）：3:1 以上（18pt以上または14pt太字）
• ・SC 1.4.6（AAA・通常テキスト）：7:1 以上
• ・SC 1.4.6（AAA・大きいテキスト）：4.5:1 以上
• ・SC 1.4.11（非テキストコントラスト）：UI部品とグラフィカルオブジェクトは3:1以上
• ・WCAG 2.2新規：SC 2.4.11 フォーカス表示の隠蔽禁止

得点板の数字は確実に「大きいテキスト」扱いになるので、最低3:1あれば法令上の問題はありません。ただし「離れた席から」の要件を考えると、白文字×黒背景（21:1）が現実的なベストです。

視認距離から逆算する数字サイズ

ISO 9241-303（人間工学・視覚表示の品質要件）が定める「視角20分以上」を基準にすると、10m離れた席から読むには文字高約58mmが必要になります。

10インチタブレット（縦125mm程度）を3〜5mの距離で使うのが現実的なバランス。それ以上の会場では大型モニターやプロジェクター投影が必要です。

Tailwind CSSによる大型タイポグラフィ実装

ブラウザ上で得点板を実装する際、Tailwind CSSのレスポンシブ・font-sizeユーティリティが効率的です。

• ・text-9xl：8rem（128px・最大値）。タブレット縦置きの得点表示に
• ・text-[12rem]：任意値で巨大化。全画面化時に大画面を埋める
• ・tabular-nums：font-variant-numeric: tabular-nums で等幅数字
• ・leading-none：line-height: 1 で行間ロス削減
• ・tracking-tight：letter-spacing: -0.025em で大型時の間隔調整
• ・font-black：font-weight: 900 の最大ウェイトで視認性向上

視覚的に「太い」数字はコントラスト比が同じでも読みやすさが大きく違います。font-blackやfont-extraboldを積極的に使うのがコツです。

WAI-ARIA timer roleとaria-live

MDNとW3C WAI-ARIA 1.2は、得点・タイマーのようなライブ要素に向けた属性を定義しています。

• ・role="timer"：時間経過・カウントアップ要素を明示。スクリーンリーダーが認識
• ・aria-live="polite"：変化を「他の読み上げが終わってから」通知
• ・aria-live="assertive"：変化を即時通知（タイムアップ等の重要イベント）
• ・aria-atomic="true"：変化があれば要素全体を1単位として読む（「ホーム 12点」のように）
• ・aria-label="ホームの得点"：数字の意味を明示
• ・tabindex="-1"：プログラム的にフォーカス可能だがTabで届かない

ただし得点板の数字を秒単位で読み上げ続けると、視覚障害者にとっては騒音にしかなりません。「変化のたびに新スコアを1回だけ読む」設計（aria-live="polite" + aria-atomic="true"）が現実的です。

色覚多様性と暗い体育館の輝度

得点板でチームを色分けする際は、赤緑色覚（P型・D型）の視認性に配慮する必要があります。

• ・赤×緑の組み合わせを避ける：P型・D型約5％（男性）が判別困難
• ・青×オレンジ・青×黄：CUD（カラーユニバーサルデザイン）推奨色
• ・明度差で区別：色差だけでなく濃淡を変えると確実
• ・形・位置の冗長化：「左がホーム」「右がアウェイ」と位置で固定
• ・暗い体育館：白文字×黒背景で輝度150〜200nits、まぶしさを抑える
• ・明るい体育館：黒文字×白背景で輝度400nits以上、太陽光下なら600nits

関連記事・ツール

• ・スコアボード（得点板）
• ・主要競技の得点ルール完全ガイド
• ・タブレットを得点板にする実用ガイド
• ・時計UIの設計：Intl.DateTimeFormatとモノスペース