UIカラーQAワークベンチ|Web公開前のコントラスト・Focus・Border確認

実際に使うUIカラーを入力して、本文・ボタン・境界線・フォーカス・リンク・無効状態を公開前にまとめて確認します。配色を作るツールではなく、実装前後の色QA用です。

背景
Surface
本文
補助文字
Primary
Primary上の文字
Border
Focus
Link
Disabled
Dashboard
設定を保存しますか?

変更内容を確認してから保存してください。詳細を見る

カード / Surface
本文と背景を色比較 配色ラボで調整

このワークベンチの役割

ここでは「きれいな配色」を評価しません。実際のWeb・UIで、文字が読めるか、ボタン上の文字が消えていないか、境界線やフォーカスが背景に埋もれていないか、リンクが本文と区別できるかを確認します。

数値だけで公開可否を決めない

コントラスト比は重要な確認材料ですが、フォントサイズ・太さ・背景画像・実機表示・hover / focus / active / disabled の状態によって読みやすさは変わります。ここで問題がなくても、最後は実画面で確認してください。