アクセシビリティに通るデザインをClaude Designで指定するには

「きれい」と思ってたデザインが全部アウトだった話

Claude Designを使い始めて半年、初めてアクセシビリティチェックが入る案件が来た。コントラスト比の確認ツールで検証したら、「洗練されてる」と思って使っていたライトグレーのテキストが、WCAG AA基準（4.5:1）を軒並み下回っていた。

背景白（#ffffff）にテキスト #888888 を使うとコントラスト比は約3.5:1。AA基準を満たすには #767676 以上のダーク寄りのグレーが必要になる。Claude Designは「おしゃれに」と頼むとこういうライトグレーを好んで使う。きれいに見えるから気づかない——これが一番やっかいな罠だった。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

コントラスト比をプロンプトに組み込む

解決策はシンプルで、最初のプロンプトに一行加えるだけ。

テキストと背景のコントラスト比はWCAG AA基準（4.5:1以上）を満たしてください。
見出し・本文、全箇所に適用。

これだけで生成の段階からかなり改善する。ブランドカラーが薄い色の場合はこう書く方が通りやすかった。

プライマリカラーは #7ecbff（ライトブルー）ですが、テキストへの使用はAA基準を
満たせないため、テキスト色には #0056b3（ダークブルー）を使ってください。

最終確認はChrome DevToolsのアクセシビリティパネルか、WebAIM Contrast Checkerで必ずやる。Claude Designが「準拠しました」と言っても信用しきらない方がいい。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

色覚多様性への対応

Claude Designはデフォルトで「エラー=赤、成功=緑」の組み合わせを使いがちで、P型・D型の色覚多様性を持つユーザーには判別しにくいことがある。

色だけで状態を区別しないでください。
エラーには × アイコン、成功には ✓ アイコンも添えること。
P型・D型色覚でも識別できる配色にしてください。

「P型・D型」と明示して指示すると、Claude Designが形や記号でも区別を付けた出力をしてくれるようになった。言わなければ赤緑だけで終わってくることが多い。

フォントサイズは油断するな

「コンパクトに」「情報量多めで」と頼むと、12pxや11pxのテキストが平気で出てくる。

本文テキストの最小サイズは16px。
注釈・キャプションも14px以下にしないでください。

この一行を入れるだけで、読みにくい小さいテキストの頻度が大幅に減った。特にデータ密度の高いダッシュボードや表を作るときは必須だと思っている。

最初のプロンプトに入れてしまうのが正解

アクセシビリティ対応は後からチェックするより、最初のプロンプトに組み込む方が断然楽だった。自分は「アクセシビリティ設定」というプロンプトブロックを用意してノートに保存しておき、毎回コピペしている。

クライアントワークでアクセシビリティ要件が明示されていないときも入れておいて損はない。コントラストが適切なデザインは、ほぼ例外なく全体的な視認性が高くなる。副作用がないどころか、デザイン品質が上がる。