測定したコントラストで読みやすい配色を作る。
色に役割を割り当て、実際の文字色と背景色の組合せを試します。美しい色の集合だけでは読める文字や使える操作状態は保証されません。
作業手順をタスクに合わせましょう。
役割ごとに色を選び、正確な値を示して使う前景と背景の組を試します。必要な操作状態や別の面も含めます。好みと測定したコントラストを分け、実際の部品で確認します。
- 用意するもの
- ブランドの特徴とアクセシビリティ条件。
- 得られるもの
- コントラスト比を確認した配色案。
入力と結果を確認しましょう。
説明用の入力と出力 · 実際の WebAct 実行ではない学習用サンプル
入力項目サンプル個
Create a small UI palette using navy and warm cream, plus an orange-brown accent. Need body text, links and a filled action button. Calculate contrast for solid, opaque pairs.
完成例
Background: #fff7ed Body text: #172554 — contrast on background ≈ 13.84:1 Underlined links/accent text: #9a3412 — contrast on background ≈ 6.88:1 Action button: #9a3412 background, #ffffff label — contrast ≈ 7.31:1 These pairs exceed the 4.5:1 normal-text threshold. This checks the stated solid-color pairs only; focus, hover, disabled states and the rest of the interface still need review.
この入力をプロンプトに読み込み、WebAct にコピーして試してください。結果は掲載例と異なる場合があります。
判断のポイントとトラブル対処。
文字の組合せが高コントラストなら画面全体が使いやすいですか？
いいえ。他の状態、操作部品、色以外の手がかりも確認が必要です。配色の試験は評価の一部です。
アクセント色は飾りにはよくても小さな文字で使えないのはなぜですか？
背景とのコントラストが不足するのかもしれません。役割や組合せを変えます。
このワークフローの参考資料。
自分の資料で試しましょう。
タスクのプロンプト内の例を自分の資料に置き換えてください。必要な要件を残し、タスクを WebAct にコピーします。
タスクを調整してコピー ↑