ChatGPT の画像認識機能を使って画像内のコントラスト比チェックができるか試してみた件

ChatGPT が新たに画像認識・生成機能の追加を発表し、実際に私の環境でも使用できるようになっていましたので、試しに、こちらの指定したとおりにアップロードした画像内の色のコントラスト比を調べ、出力することができるのか、実験してみました。

どうやら私が勘違いしていてて GPT-4V だと思って使ってたのは別の機能だったらしいので正式に GPT-4V が使えるようになったらこの記事は書き直します。その前提でどうぞ。

つい先日ですが、ChatGPT が新たに画像認識と生成機能 (GPT-4V)、さらに現状ではスマートフォンアプリからのみですが音声機能の追加を発表し、実際に私の環境でも使用できるようになっていましたので早速試してみました。

で、音声機能は後々試すとして、まずは画像認識機能がどんな感じなのかなということで、ある画像を用意し、その画像内から 『隣り合わせになっている色のコントラスト比を調べ、あるしきい値以下の場合はその箇所を特定して画像内に印を付けてくれ』 という結構難しいんじゃないかなと思われる作業をやってみてもらったのでその結果を残しておきます。

実際には事前にプロンプトを何度か調整しながら、どうすればうまいこと望み通りの処理をしてくれるかなというのを試しつつ、最終的に決めたプロンプトで数回試してみた結果なのと、今回使用した検証用画像に特化したプロンプトの調整になっているので、恐らく汎用性は低いというか、多分使う画像によって結果も変わってくる可能性が高いですが、個人的にはこんな簡単なプロンプトでお任せしてここまで出来るんだ、すげぇなっていう感想でした。

ChatGPT で画像機能を使えるようにする

まず前提として新しい画像や音声機能を使うには、ChatGPT Plus など、課金している必要があります。その前提で設定画面から 「ベータ機能」 の項目に行くと、「高度なデータ分析」 という項目がありますのでそれを有効にします。

ChatGPT の設定画面で「高度なデータ分析」を有効にする

上記設定を有効にすると、GPT-4 の選択肢に 「Advanced Data Analysis (Beta)」 という項目が出てきますのでそれに切り替えます。

color_contrast_auto_check_chatgpt_setting_02.png

こうすることでチャット欄に画像アップロード用のボタンが表示されるようになります。これで準備完了。

今回使用した検証用画像とプロンプト

今回、下記のような画像を用意しました。

今回のテストで使用した画像

縦左側の列はわざとテキストの色と背景の色が、WCAG 2.0 (2.1 でも同じ) における達成基準 1.4.3、「コントラスト比 (最低限)」で提示されている 4.5:1 のコントラスト比を満たさない組み合わせ。縦右側の列は達成基準を満たす組み合わせにしてあります。

その上で、下記のようなプロンプトで GTP-4 さんに作業を依頼します。

今回のテストで使用したプロンプト

画像からWCAG 2.0に基づき、テキストと背景のコントラスト比を調べたいです。

まず、画像内からテキストとその背景色を含むブロックを抽出してマークしてください。
次に、抽出した各ブロックの内側で使用されている色を抽出し、その中で最も暗い色と明るい色、2色の間のコントラスト比を計算してください。
最後に、コントラスト比が4.5:1未満の色の組み合わせを含むブロックを特定してマークしてください。マークには計算したコントラスト比の値を含めてください。また、マークした画像と合わせてコントラスト比に問題があった箇所で比較した色(Hex値)を提示してください。

画像をアップロードしますので、手順に沿った作業をお願いします。

プロンプトは何度か調整して上記に落ち着きました。

最初のうちは全体の背景の白色とブロックの色を比較しだしたり、テキストを含むブロックの抽出に成功しても、画像だとアンチエイリアスなどの関係で実際の見た目よりかなり多くの色が使われていることになりますが、それら全部を比較しようとしてタイムアウトしたりしていたので、その辺を調整したりしています。

この実行結果が以下です。面倒くさかったのでチャットの画面をそのまま貼り付けていますから画像がでかい、というか長いですけどご容赦ください。

まず 1つ目はかなりうまくいった例です。

テキストを含むブロックの抽出時になぜか色が変換されてしまっていて、最終的に出力された問題のあるコントラスト比とその場所のマークが入った画像がちょっとおかしいことになっていますけども、チャットの最後にテキストで出力してもらった、『この色とこの色を比較したよ』 という部分とその計算結果については正しく抽出、計算されていることがわかります。

ちなみに途中で計算式も出してくれていますが、これはプロンプトの調整中に、『コントラスト比の計算で使った式を提示してくれ』 とかお願いしていたことを多分きちんと覚えてくれていて、親切で出してくれてる。気が利くね。

ChatGPT によるコントラスト比チェックの結果例-1

2つ目ですが、下の画像は同じ画像とプロンプトで試した別のプロセス。先ほどとは異なり、テキストを含むブロックを抽出した結果の画像は正常。

ただ、比較した色が先ほどとは異なっていて、恐らくブロック内の色の抽出に時間がかかったりしてうまく行かなかったんじゃないかなと。ただ、意図した通りの計算にはなっていないけど、コントラスト比が足りていないブロックの検出自体は成功してる。

ChatGPT によるコントラスト比チェックの結果例-2

ということで、冒頭にも書いたとおり、じゃあ何かこれを業務で使えますか? といわれれば厳しいと思いますけども、提示したのはとても簡単なプロンプトにも関わらず、こちらのやりたいことを把握して処理してくれた GPT-4 さん優秀。と思いました。

参考リンク

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?