問題
デモサイトの補助テキストのコントラスト比が WCAG AA(4.5:1、大文字サイズでも 3:1)を大きく下回っており、暗い環境以外では読みづらい。
計測値(背景 --bg: #07070b 基準):
| 対象 |
色 |
コントラスト比 |
--faint: #4c4c5c(tags / peer-note / props の dd / codeblock-bar / footer) |
#4c4c5c |
約 2.4:1 |
| LockInput の placeholder |
#4a4d66 on rgba(9,11,20,.92) |
約 2.4:1 |
--dim: #87879a |
#87879a |
約 5.7:1(OK) |
該当箇所:
apps/site/src/layouts/Layout.astro:38(--faint 定義)— 10〜11px の小さい文字に多用されているのが特につらいpackages/ui/src/three/LockInput/styles.ts:72(.p4ni-li-input::placeholder { color: #4a4d66 })GlowInput / KaraokeInput は ::placeholder を未指定のためブラウザデフォルト任せ(環境によって 4.5:1 を割る)
修正案
--faint を #6a6a80 前後まで持ち上げる(4.5:1 付近)。装飾的なラベルに限っても最低 3:1 は確保- LockInput の placeholder を
#8a8da8 程度に
GlowInput / KaraokeInput にも ::placeholder の色を注入 CSS で明示(例 #7d7d90)し、環境差をなくす
問題
デモサイトの補助テキストのコントラスト比が WCAG AA(4.5:1、大文字サイズでも 3:1)を大きく下回っており、暗い環境以外では読みづらい。
計測値(背景
--bg: #07070b基準):--faint: #4c4c5c(tags / peer-note / props の dd / codeblock-bar / footer)#4a4d66onrgba(9,11,20,.92)--dim: #87879a該当箇所:
apps/site/src/layouts/Layout.astro:38(--faint定義)— 10〜11px の小さい文字に多用されているのが特につらいpackages/ui/src/three/LockInput/styles.ts:72(.p4ni-li-input::placeholder { color: #4a4d66 })GlowInput/KaraokeInputは::placeholderを未指定のためブラウザデフォルト任せ(環境によって 4.5:1 を割る)修正案
--faintを#6a6a80前後まで持ち上げる(4.5:1 付近)。装飾的なラベルに限っても最低 3:1 は確保#8a8da8程度にGlowInput/KaraokeInputにも::placeholderの色を注入 CSS で明示(例#7d7d90)し、環境差をなくす