チュートリアル
Claude Opus 5.5でブランドカラーの文字コントラストを直す
Claude Opus 5.5には文字と背景の具体的な組み合わせを修正させ、候補色は計算で確かめます。ブランドらしさを残したまま、ボタン、小さな注記、リンクを読みやすくできます。オレンジをすべて茶色にするより、色の用途を分ける指示が役立ちます。
Claude Opus 5.5には文字と背景の具体的な組み合わせを修正させ、候補色は計算で確かめます。ブランドらしさを残したまま、ボタン、小さな注記、リンクを読みやすくできます。オレンジをすべて茶色にするより、色の用途を分ける指示が役立ちます。
この記事は計算例を含む提案手順で、Opusの性能を実測したものではありません。公式プロンプトガイドを参考に、承認済みロゴを固定し、指定したUI変数だけを変える成果物を求めます。
雰囲気ではなく色の組を渡す
文字と直後の背景のCSS値、不透明度、グラデーション、文字サイズ、太さ、状態を集めます。スクリーンショットは位置確認に便利ですが、画素には圧縮やアンチエイリアスの影響があります。計算には元の色値を使います。
W3Cの説明では通常の文字は4.5:1、大きな文字の条件を満たす場合は3:1が基準です。大きな文字は原則18 pt以上の通常文字、または14 pt以上の太字で、他の文字体系では相当サイズを考慮します。未達の値を丸めて合格にしてはいけません。ロゴの例外はブランドUI全体には適用されません。
| 用途 | 保持するもの | 変更候補 |
|---|---|---|
| 承認済みロゴ | 元のアートワーク | 配置や周囲の余白 |
| 小さなボタン文字 | 文言と読めるサイズ | 文字色または背景色 |
| 文中リンク | 意味とリンク先 | 色と明示的な下線 |
| 装飾アクセント | ブランドの色相 | 内容を隠さなければ変更不要 |
ホバー、フォーカス、押下状態は別々に確認します。文字の一組が合格しても、ページ全体のアクセシビリティ監査が完了したわけではありません。キーボード操作や文字以外の表示は別の確認が必要です。
オレンジのボタンを計算する
16 pxの白文字を`#FF4E00`に置く仮の例を考えます。sRGBを線形化して相対輝度を求め、`(明るい値 + 0.05) / (暗い値 + 0.05)`で計算すると約3.31:1です。通常文字の基準には届きません。同じ背景に黒文字なら約6.34:1です。承認時は丸める前の値で判定します。
オレンジを保って文字を暗くするか、明るい文字を保って操作用の背景色を暗くするか、二つの方向があります。鮮やかな色は装飾に残せます。Claudeに見た目だけで合格を宣言させず、候補と検証済み計算値の欄を出させてください。
ブランド色と読みやすさについてのデザイナーの相談にも同じ悩みがあります。これは課題の存在を示すもので、コンバージョン改善の証拠ではありません。
コピーして使う修正プロンプト
添付CSSと画面の文字コントラストを確認してください。
承認済みロゴは固定し、描き直しやパレット全体の置き換えはしません。
ボタンは背景#FF4E00、文字#FFFFFF、16 pxの通常の太さです。
オレンジを保って文字を暗くする案と、明るい文字を保って操作背景を暗くする案を出してください。
正確な前景色と背景色、変更する変数名、通常/ホバー/フォーカス状態、最小限のCSS差分を示してください。
コード実行が可能ならWCAGのsRGB輝度式で計算してください。不可能なら比率を未検証とし、計算器への入力値を示してください。合格値を創作しないでください。
文言、リンク先、間隔、挙動を保持し、文中リンクには下線を付けます。
未確認項目は別記し、一組の合格をページ全体の適合と呼ばないでください。納品する表示で確認する
複製したコンポーネントに一案を適用し、実寸で比較して変更した全組を再計算します。白い作業面ではなく実際の背景を使います。半透明文字は合成後の色、グラデーション上の文字は対応する背景範囲を確認します。
狭い幅と文字拡大時にも読み、フォーカスが見えること、押下時に低コントラストへ戻らないことを確かめます。承認済み変数表を納品物に添えると、後の広告やページにも同じ操作色を使えます。
Panellyでの制作につなぐ
検証済みの色で、Panelly Studioに商品、背景、見出し、CTAを含む広告全体を作らせます。複雑な写真に文字を重ねるなら均一な下地を指定し、納品サイズで確認します。PanellyがOpusを統合している、あるいは適合認証を行うという意味ではありません。
統一感はブランドスタイルのずれ、構造変更はランディングページ修正を参照してください。
よくある質問
太字にすれば十分ですか？
小さい太字が自動的に大きな文字になるわけではありません。サイズ条件と実際の組み合わせで判断します。
全ブランド色を白背景で合格させますか？
実際に情報を伝える組み合わせを評価します。装飾色と操作用の色は役割を分けられます。
