カラーシステムチェッカー（ガマットと WCAG 対）

直接の回答

カラーシステムチェッカーは、色域の判定、実用的なセマンティックペアに対する WCAG 2.2 コントラスト監査、スケールの知覚的品質を評価し、明示的な修正案を提示します。

このツールの使い方

チェッカーステージを開く

チェッカー専用ページから直接開始するか、ビルダーからメモリ上のプロジェクトをそのまま引き継ぎます。

監査レポートを確認

sRGB と Display-P3 のガマット分類、WCAG ペアの達成状況、明度の連続性や隣接ステップ差などの品質メモを確認します。

修正案を選択・適用

対象トークン、新しい値、影響が明記された修正案を適用します。ブランドの元アンカー色は固定されたまま維持されます。

セマンティックペア監査と正確な色域評価

コントラスト比は総当たりの無意味なマトリクスではなく、実際の UI で用いられる前景・背景のセマンティック関係に対して WCAG 2.2 相対輝度を用いて計算されます。sRGB 域外の Display-P3 アンカーには、不意のクリッピングを防ぐ決定論的 sRGB フォールバックを提供します。

修正機能が元のブランドカラーを勝手に変更することはなく、派生トークンがアクセシビリティ要件を吸収します。
WCAG 仕様で定義されていない関係に対して架空の非テキスト AAA 評価をでっち上げることはありません。
すべての検査はブラウザ内で現在のカラーシステムドキュメントに対してリアルタイムに実行されます。

具体例

Surface 上の Primary コントラスト AA 監査

入力: セマンティックロール: Surface 背景上の Text と Primary #2563eb アクセント

出力: AA/AAA 判定結果とオプションの派生修正トークン案を含むペアレポート

固定されたブランドアンカーを保持したまま、不合格ペアに対して具体的な調整候補を提示します。

制限事項

フラットな単色セマンティックペアの数学的アクセシビリティを評価します。複雑な写真やグラデーションは別途確認が必要です。
スケール品質のヒューリスティック判定は助言であり、デザイナーの最終判断を置き換えるものではありません。

よくある質問

チェッカーがブランド色を自動で書き換えることはありますか？

ありません。元アンカーは不変です。修正はユーザーが承認した場合にのみ、派生トークンを作成・更新します。

カスタムの前景・背景ペアを追加できますか？

はい。プロダクト固有のセマンティックペアを追加することで、ノイズを増やさず実際の UI 仕様に絞って監査できます。

キーボード操作での修正適用はサポートされていますか？

はい。すべての修正ボタンはキーボードでフォーカス可能であり、適用結果はスクリーンリーダーへ適切に通知されます。

信頼できる参考文献・標準規格

W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Official contrast thresholds for text and non-text UI components.
W3C Relative Luminance Definition & Formula ↗ — Relative luminance formula used for semantic pair contrast audits.

カラーシステムチェッカー（ガマットと WCAG 対） - FreeKitX