色覚アクセシビリティQA 2025 — シミュレーションとCIでインシデントを未然に防ぐ

Display-P3やHDRを扱うプロダクトでは、色覚多様性を考慮したQA体制が不可欠です。とはいえ、デザイン側がFigmaで色を更新するたびに手動でシミュレーションを回すのは現実的ではありません。本稿では、色覚シミュレーター、CI/CD、インシデント対応を統合し、安定してアクセシビリティを担保する方法をまとめます。

TL;DR

• color-diff と Palette Balancer を組み合わせてΔE閾値を設け、ライト/ダーク/ハイコントラストのトーンを定量監視する。
• Color Pipeline Guardian のシミュレーションセットをCIに組み込み、P型（1型2色覚）、D型（2型2色覚）、T型（3型2色覚）の疑似視覚でレポートを出力する。
• QAチェックリストは AIレタッチSLO 2025 のSLOアプローチを参考に、インシデント閾値とエスカレーション手順を明文化する。
• インシデントログは Audit Inspector でtemporalなタグ付けを行い、改善タスクと再発防止策を紐付ける。
• 成果指標として、ΔE逸脱率、WCAG合格率、色覚シミュレーションのNG件数、修正リードタイムをダッシュボードで追跡する。

1. テスト設計

1.1 カバレッジの整理

色覚QAの対象を整理するには、UIの種類とユーザーアクションを軸にマトリクス化するのが有効です。

1.2 テストシナリオ

• Scenario A: フォームのエラー表示が色だけでなくアイコンや本文でも伝わるか。
• Scenario B: チャートの凡例とデータ線が1型/2型/3型の各疑似視覚で識別できるか。
• Scenario C: ダークテーマ切り替え時に背景色とアクセント色がΔE 1.0以内で保たれるか。
• Scenario D: HDR画像をsRGBフォールバックに変換した際、主要CTAの色がWCAG AAを維持できるか（参考: HDR / Display-P3 画像の配信設計 2025 — 色忠実度とパフォーマンスの両立）。

2. CIパイプラインへの組み込み

2.1 シミュレーターの自動化

Color Pipeline Guardian では、疑似視覚ごとのPNG差分とJSONレポートを出力できます。GitHub Actionsでの例を示します。

- name: Install CLI
  run: npm install -g @uit/color-pipeline-guardian
- name: Run simulations
  run: |
    color-pipeline-guardian run \
      --input .next/screenshots \
      --modes protanopia deuteranopia tritanopia achromatopsia \
      --output reports/color-sim
- name: Upload artifact
  uses: actions/upload-artifact@v4
  with:
    name: color-sim-reports
    path: reports/color-sim

• レポートは reports/color-sim/summary.json にまとまり、ΔEの最大値やWCAG判定が格納されます。
• ΔEが閾値（例: 1.2）を超えた場合はCIを失敗させ、Audit Inspector にIssueを自動登録します。

2.2 Palette Balancer との連携

Palette BalancerのAPIを validate-contrast.mjs から呼び出し、疑似視覚レポートと合わせてダッシュボードへ送ります。

const { score } = await paletteBalancer.validate({
  foreground: token.color.primary,
  background: token.color.background,
  mode: 'AA',
});
if (score < 1) {
  await auditInspector.createFinding({
    category: 'contrast',
    tokenId: token.id,
    context: 'protanopia',
  });
}

3. ガバナンスと運用体制

3.1 QAチェックリスト

3.2 インシデントレスポンス

• 重大度は S1（重要CTA不可視）〜S4（軽微）で分類し、AIレタッチSLO 2025 のエラーバジェット概念を転用します。
• Audit Inspector にインシデントを登録すると、タイムライン・スクリーンショット・シミュレーション結果が自動紐付けされます。
• 週次の「Accessibility Ops Sync」でインシデントサマリと改善ステータスを確認し、S1/S2が3件連続した場合はデザインシステムのガードレールを見直します。

4. ダッシュボードと指標管理

4.1 指標例

• ΔE逸脱率: ブランド/テーマごとの割合。月間5%未満を目標。
• WCAG合格率: UIコンポーネント単位でのパス率。95%以上を維持。
• Simulation NG件数: 疑似視覚で差分面積5%以上となったスクリーン数。
• 修正リードタイム: インシデント発生からデプロイまでの平均時間。

4.2 データ連携

• シミュレーション結果は BigQuery に蓄積し、Looker Studioで可視化します。
• Grafanaでは color.qa.incidents のメトリクスをトレースし、SLO違反時にPagerDutyへアラート送信します。

5. ケーススタディ

グローバルSaaS製品で色覚QAを導入した際の成果です。

• 色覚関連のサポート問い合わせが月12件 → 2件に減少。
• ΔE逸脱率が9.8% → 1.4%へ改善。
• 修正リードタイムが平均42時間 → 9時間に短縮。

まとめ

色覚アクセシビリティQAは、シミュレーション・定量指標・運用フローの三位一体で初めて継続的に回せます。Color Pipeline Guardian や Palette Balancer をCIへ組み込むことで、デザイン更新のたびに品質が保証される状態を作れます。まずは対象UIのマトリクス化から始め、疑似視覚レポートを定例会議に取り込んでいきましょう。