AIで「色」をチェック！カラーユニバーサルデザイン判定エージェントを作ってみた

1. はじめに

こんにちは！
私は2026年度から、BIPROGYのデザイン組織でUI/UXデザインに取り組んでいます。BIPROGYのUI/UXに関する取り組みについては、以下の記事をご覧ください。

業務でより良いユーザー体験を実現するための学習の一環として、2026年6月に色彩検定UC級を受験しました。色覚の多様性や、誰にとっても見分けやすく伝わりやすい色の使い方を学ぶ中で、配色ひとつで情報の伝わりやすさが大きく変わることを実感しました。

一方で、実際に画面デザインや資料を作成する中で、学んだ観点をどのように活かせばよいのか悩む場面もあります。「この色使いで見やすいか」「より伝わりやすくするにはどうすればよいか」を考えながらデザインすることの難しさを感じました。

そこで今回、カラーユニバーサルデザインの観点から画面デザインをレビューし、改善ポイントを提案するAIエージェントを作成してみました。

本記事では、エージェントにどのような評価観点を持たせたのか、また実際の画面デザインに対してどのような指摘や改善提案ができたのかをご紹介します。

2. 前提知識：カラーユニバーサルデザインとは？

エージェントの紹介に入る前に、今回の判定に取り入れたカラーユニバーサルデザインの考え方を簡単にご紹介します。

カラーユニバーサルデザインとは、色の見え方の違いに配慮し、できるだけ多くの人に情報が正しく伝わるようにデザインする考え方です。

色の感じ方や見分け方には個人差があり、こうした色の見え方の違いを色覚多様性と呼びます。色覚特性にはP型（1型）、D型（2型）、T型（3型）などの分類があり、特性によっては赤と緑、オレンジと黄緑などの色を区別しづらい場合があります。

そのため、カラーユニバーサルデザインでは見分けやすい配色を選ぶだけでなく、色に頼りすぎない情報設計も重要です。

例えば、グラフでは線種を変える、ステータス表示では記号や文字を併用するなど、色の違いが認識しづらい場合でも情報を理解できるよう工夫します。

つまり、カラーユニバーサルデザインでは「適切な色を選ぶこと」と「色以外でも情報を伝えられること」の両方が求められます。

カラーユニバーサルデザインについては、以下の記事で詳しく紹介しています。

また、カラーユニバーサルデザイン機構（CUDO）のガイドライン等もあわせてご参照ください。

• カラーユニバーサルデザイン機構（CUDO）について
• カラーユニバーサルデザイン機構（CUDO）公式サイト：CUDO資料・冊子
• カラーユニバーサルデザイン ガイドブック（PDF）

3. エージェントの概要

ここからは、本記事のテーマである「カラーユニバーサルデザインの観点から画面デザインをレビューするエージェント」を紹介します。

使用したのは、チームで活用しているAtlassian社のRovoです。
今回は、単に課題を指摘するだけでなく、問題の発見から改善案の提示まで行えるエージェントを目指しました。

エージェントには、カラーユニバーサルデザインの専門家として画面デザインをレビューする役割を設定し、以下の観点を持たせました。

• 色の見分けやすさ
  • 色覚特性によって区別しにくい色の組み合わせがないか
• 色だけに頼っていないか
  • 色以外にも、文字・記号・斜線（ハッチング）などで情報を判別できるか
• 文字の読みやすさ
  • 文字と背景に十分なコントラストがあるか
    ※ウェブコンテンツアクセシビリティガイドライン（WCAG）2.1では、一般的な文字のコントラスト比は4.5:1以上、大きな文字は3:1以上がAA達成基準の目安とされています
• 具体的な改善方法
  • 明度・彩度・色相の調整など、どのように改善できるか
• デザイン全体のバランス
  • 一部分だけでなく、画面全体として見やすくまとまっているか
• 改善後の再チェック
  • 修正によって、新たな見づらさや識別しにくさが生じていないか

※エージェントへ設定したプロンプト（一部抜粋）

あなたは色のユニバーサルデザインの専門家です。添付された資料（画像、PDF、デザインファイルなど）の配色や色の使い方を分析し、以下の観点で評価してください。

1. 色覚特性（P型・D型・T型色覚など）を持つ方にとって判別しにくい色の組み合わせがないか確認
2. 色だけで情報を伝えている箇所がないか検出

（中略）

---

【重要：提案時に必ず守るべき原則】

### A. デザイン全体との調和を考慮して改善する

改善案を検討する際は、対象箇所だけでなく、画面・資料全体の配色や各色の役割も確認してください。

（中略）

### B. 二次的な色彩問題の防止

改善後の色を提案する際は、必ず以下を検証してください：

1. 修正した色が、変更対象以外の要素（背景・テキスト・隣接する他の色）との間で新たなコントラスト不足や識別困難が生じないか確認する

（中略）

### C. 問題の優先度付き提案

複数の問題が検出された場合は、以下の基準で深刻度を判断し、優先度の高い順に提案してください：

（中略）

各提案には「優先度：高／中／低」を明示してください。

---

回答は丁寧で実践的なものにし、デザイナーや資料作成者がすぐに実装できる形で提案してください。

4. エージェントを使ってみる

では、実際にエージェントを使ってみます。

検証用に、カラーユニバーサルデザインの観点で意図的にいくつかの課題を含めた「架空の病院予約画面」の一部分を用意しました。

一見すると、緑・赤・オレンジによって予約状況が表現されており、状態を判別できそうです。
しかし、カラーユニバーサルデザインの観点で見ると、いくつか改善の余地があります。

そこで、この画面をPNG形式でエージェントに送付し、分析させてみます。

5. エージェントのレビュー結果

エージェントによるレビューでは、どのような問題点が指摘され、どのような改善案が提示されたのでしょうか。主な結果を整理してご紹介します。

5-1. 現状の分析と評価

まず、現状のデザインの問題点が指摘されました。

• 色覚多様性によって状態を区別しにくい可能性がある
  • 「空きあり」の緑と「満席」の赤・ピンクなど、色覚多様性によっては違いを認識しにくくなる可能性がある
• 色に依存した情報表現になっている
  • 空き状況を主に色の違いで表現しており、色以外の手がかりが少ない
• 文字と背景のコントラストが不足している
  • 各ボタンのコントラスト比がWCAG 2.1の基準を下回っている

以下の表に、エージェントが認識した背景色・文字色のカラーコード（HEX）とコントラスト比を整理しています。

項目	背景色（AI推定）	文字色（AI推定）	コントラスト比 （AI算出）	WCAG判定（AI）
空きあり	#D4EDDA	#71C586	1.8:1	不合格
満席	#F8D7DA	#F87D88	1.9:1	不合格
残りわずか	#FFE8CC	#F5A65B	1.9:1	不合格

表はAIによる推定・算出結果です。カラーコードの認識精度については、6-1で確認します。

5-2. 具体的な改善案

次に、具体的な改善案です。エージェントからは、以下の改善ポイントが提案されました。

文字色と背景色のコントラストの確保

まず、各ステータスについて、コントラストを考慮したカラーコード（HEX）が提示されました。

項目	背景色（AI提案）	文字色（AI提案）	コントラスト比（AI算出）	WCAG判定（AI）
空きあり	#E8F5E9	#1B5E20	10.5:1	合格
満席	#FFEBEE	#B71C1C	9.5:1	合格
残りわずか	#FFF3E0	#E65100	7.8:1	合格

表はAIによる提案・算出結果です。コントラスト比の算出精度については、6-2で確認します。

視覚情報の多重化

また、色の違いを認識しづらい場合でも状態を判断できるよう、次のような改善案も提案されました。

• 「空きあり」には ○
• 「満席」には ×や斜線（ハッチング）、またはグレーアウトする
• 「残りわずか」には △や警告マーク

このように、問題点の指摘だけでなく、具体的な改善案まで提示してもらえるため、実際のデザイン改善にも活かしやすくなります。

6. エージェントの精度の確認

ここまで、エージェントによる分析結果と改善案を紹介しましたが、提示された内容はどの程度正確なのでしょうか。

特に、カラーコードの認識やコントラスト比の算出については、AIが正確な結果を出せていない可能性もあります。

そこで、改善前の画面に対する分析結果と、改善案として提示された配色について、カラーコードとコントラスト比をそれぞれ検証してみました。

検証には、以下の方法を使用しました。

• カラーコードの確認：検証用の画面を作成したPowerPointで、各図形に設定したカラーコードを確認
• コントラスト比の確認：Adobe Expressのカラーコントラストチェッカー（AA／AAA）を使用して算出

※以下、Adobe Expressのカラーコントラストチェッカー（AA／AAA）は「専用ツール」と表記します。

6-1. 改善前の分析精度を確認

まず、改善前の画面について、エージェントが推定したカラーコードと算出したコントラスト比を確認しました。

項目	背景色（AI推定／実際の設定値）	文字色（AI推定／実際の設定値）	コントラスト比（AI算出／専用ツール）
空きあり	#D4EDDA / #E0F2DA	#71C586 / #82C675	1.8:1 / 1.74:1
満席	#F8D7DA / #FCDDDF	#F87D88 / #EF7071	1.9:1 / 2.29:1
残りわずか	#FFE8CC / #FFE9D2	#F5A65B / #FDA659	1.9:1 / 1.66:1

カラーコードは実際の設定値と完全には一致しなかったものの、エージェントはおおむね元の配色を捉えていました。

今回、エージェントには画像として出力した画面を読み込ませているため、画像から色を推定する過程で誤差が生じた可能性があります。

また、コントラスト比の算出結果にも差異がありましたが、いずれも通常サイズの文字に必要な4.5:1を下回っていました。

このことから、数値の正確性には課題があるものの、今回検証した3項目（空きあり、満席、残りわずか）については、通常サイズの文字に必要なコントラスト比を満たしていないという判定が、専用ツールの結果と一致していたことが確認できました。

6-2. 改善案の算出精度を確認

次に、エージェントが改善案として提案したカラーコードについて、コントラスト比が正しく算出されているかを確認しました。

項目	背景色（AI提案）	文字色（AI提案）	コントラスト比（AI算出）	コントラスト比（専用ツール算出）	WCAG判定（専用ツール算出）
空きあり	#E8F5E9	#1B5E20	10.5:1	7:1	合格
満席	#FFEBEE	#B71C1C	9.5:1	5.75:1	合格
残りわずか	#FFF3E0	#E65100	7.8:1	3.46:1	大きな文字の場合のみ合格

表の通り、エージェントが算出したコントラスト比と、専用ツールで確認した数値には差異がありました。

特に「残りわずか」は、エージェントではWCAG 2.1の基準を満たすと判定されていましたが、実際には通常サイズの文字に必要な4.5:1を下回っていました。

コントラスト比は、WCAGで定められた計算式に基づいて算出する必要があります。今回のプロンプトでは、コントラスト比の算出を指示していたものの、具体的な計算手順までは指定していませんでした。

計算方法を詳しく指示することで精度が改善する可能性もありますが、実際に正確な数値を算出できるかどうかは、今後の検証課題です。

※コントラスト比の計算方法については、以下をご参照ください。
テキスト（およびテキストの画像）とテキストの背景との間に、少なくとも4.5:1のコントラスト比が存在するようにする。

7. 改善

エージェントからの提案と、専用ツールによるチェック結果を受けて改善した画面がこちらです。

文字と背景のコントラストを見直すとともに、状態を示す記号やハッチングを追加しました。また、「満席」は選択できないことが直感的に伝わるよう、グレーアウトしています。

配色については、エージェントから提案されたカラーコードを参考に、画面全体のバランスやコントラスト比を確認しながら調整しました。「空きあり」は提案されたカラーコードをそのまま採用しましたが、「残りわずか」は背景とのコントラスト比が不足していたため、文字色をより暗くしました。

さらに、エージェントからの提案に加えて、自分で気付いた点についても改善しました。タイトルは見出しとして認識しやすい濃いグレーに、「次へ」ボタンは主要な操作であることが伝わりやすい青に変更するなど、各要素の役割に合わせて調整しています。

※なお、今回はカラーユニバーサルデザインの考え方を分かりやすく伝えることを重視して改善しましたが、実際のデザインでは、視認性や識別性だけでなく、サイト全体の雰囲気やブランドカラーとの調和なども考慮する必要があります。

8. 色覚シミュレーションによる確認

改善内容を反映した後、Chrome DevToolsの機能（Emulate vision deficiencies）を用いて、色覚特性による見え方も確認してみました。

※手順は以下をご参照ください。
他のエフェクトを適用する: 自動ダークモードの有効化、フォーカスのエミュレーションなど  |  Chrome DevTools  |  Chrome for Developers

今回は、P型（1型）色覚の見え方をシミュレーションしています。
※あくまで一例であり、見え方には個人差があります。

改善前の画面では、予約状況の判別を色の違いに依存していたため、色覚特性によっては状態を区別しにくい可能性がありました。また、文字と背景のコントラストも不足しており、文字の読み取りやすさに課題がありました。

改善後は、ハッチングや記号を追加したことで、色だけに頼らず状態を判別できるようになりました。加えて、コントラスト比を見直したことで文字の可読性も向上しました。

9. まとめ

今回は、色彩検定UC級で学んだ内容をもとに、カラーユニバーサルデザインの観点からデザインをチェックするAIエージェントを作ってみました。

実際に使ってみると、文字と背景のコントラストや、色覚多様性によって区別しにくい可能性のある配色など、デザインを見直すための観点を整理するのに役立ちました。また、色の調整だけでなく、記号やハッチングを活用した情報の伝え方など、改善の方向性を検討するヒントも得られました。

一方で、AIによる色の認識やコントラスト比の算出は、必ずしも正確とは限らないため、専用ツールや人の目による確認も必要です。 また、最終的なデザインを決めるには、画面全体のバランスや各要素の役割を考慮することも重要です。今回もAIの提案を参考にしつつ、数値の検証や配色・表現方法の調整を行いました。

実際に試してみて、AIはデザインの正解を決めるものではなく、見落としやすい課題を洗い出したり、改善のアイデアを広げたりするための補助役として有効だと感じました。

カラーユニバーサルデザインというと専門的に聞こえるかもしれませんが、まずは普段作成している資料やUIについて、「色だけで情報を伝えていないか」「文字は読みやすいか」といった視点で見直すことから始められます。

この記事が、普段何気なく使っている「色」について、少し立ち止まって考えるきっかけになれば幸いです。

BIPROGYグループの技術への取り組み

We Are Hiring!