https://codedchords.dev • This is a web feed, also known as an Atom feed. Subscribe by copying the URL from the address bar into your newsreader. Visit About Feeds to learn more and get started. It's free. Visit website Recent posts Updated on $DATE date Accessibility Coded Chords - Accessibility A personal blog Zola2025-01-25T00:00:00+00:00https://codedchords.dev/tags/accessibility/atom.xml ChromaLensCLI: Command Line Color Accessibility Validation 2025-01-25T00:00:00+00:00 2025-01-25T00:00:00+00:00 Toshiyuki Yoshida https://codedchords.dev/blog/2025/01/chromalenscli-command-line-color-accessibility/ <p>とりあえず色覚異常の方にも画像が正しく認識できてるか確認するためのツール <code>ChromaLens CLI</code>を作ってみた。</p> <h2 id="ChromaLens_CLIの使い方">ChromaLens CLIの使い方</h2> <p>使い方は、次の通り。</p> <pre class="giallo z-code"><code data-lang="shellscript"><span class="giallo-l"><span class="z-entity z-name z-function">./chromalens</span><span class="z-string"> input.jpg output.jpg --type tritanopia</span></span></code></pre> <p>これで色覚異常の方が実際どのようにインプットとなる画像が見えているかシミュ レーションした画像が出力されます。 <code>type</code> オプションの指定は次の通りです。</p> <ul> <li>protanopia (1型色覚)</li> <li>deuteranopia (2型色覚)</li> <li>tritanopia (3型色覚)</li> </ul> <h4 id="ChromeLens_CLIの環境設定">ChromeLens CLIの環境設定</h4> <p>以下は、venvでPythonの仮想環境を作って必要なパッケージをインストールする手順です。</p> <pre class="giallo z-code"><code data-lang="shellscript"><span class="giallo-l"><span class="z-entity z-name z-function">python3</span><span class="z-string"> -m venv venv</span></span> <span class="giallo-l"><span class="z-support z-function z-builtin">source</span><span class="z-string"> venv/bin/activate.fish</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">pip</span><span class="z-string"> install numpy Pillow</span></span></code></pre> <p>以下が実際のコードです。<code>chromalens</code>というファイル名で保管ください。授業中に書いたコードなので、エラー処理などは省いています。</p> <pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment">#!/usr/bin/env python3</span></span> <span class="giallo-l"><span class="z-keyword">from</span><span class="z-source"> PIL</span><span class="z-keyword"> import</span><span class="z-source"> Image</span></span> <span class="giallo-l"></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-storage z-type">class</span><span class="z-entity z-name z-type"> ColorVisionSimulator</span><span class="z-punctuation">:</span></span> <span class="giallo-l"><span class="z-source"> MATRICES</span><span class="z-keyword z-operator"> =</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &#39;protanopia&#39;</span><span class="z-punctuation">:</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">array</span><span class="z-punctuation">([</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.567</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.433</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.000</span><span class="z-punctuation">],</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.558</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.442</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.000</span><span class="z-punctuation">],</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.000</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.242</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.758</span><span class="z-punctuation">]</span></span> <span class="giallo-l"><span class="z-punctuation"> ]),</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &#39;deuteranopia&#39;</span><span class="z-punctuation">:</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">array</span><span class="z-punctuation">([</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.625</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.375</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.000</span><span class="z-punctuation">],</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.700</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.300</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.000</span><span class="z-punctuation">],</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.000</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.300</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.700</span><span class="z-punctuation">]</span></span> <span class="giallo-l"><span class="z-punctuation"> ]),</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &#39;tritanopia&#39;</span><span class="z-punctuation">:</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">array</span><span class="z-punctuation">([</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.950</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.050</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.000</span><span class="z-punctuation">],</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.000</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.433</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.567</span><span class="z-punctuation">],</span></span> <span class="giallo-l"><span class="z-punctuation"> [</span><span class="z-constant z-numeric">0.000</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.475</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0.525</span><span class="z-punctuation">]</span></span> <span class="giallo-l"><span class="z-punctuation"> ])</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-storage z-type z-function z-python"> def</span><span class="z-entity z-name z-function"> simulate</span><span class="z-punctuation">(</span><span class="z-variable z-parameter z-function z-language z-special z-self z-python">self</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> image_path</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> output_path</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> cvd_type</span><span class="z-punctuation">):</span></span> <span class="giallo-l"><span class="z-keyword z-control z-flow z-python"> if</span><span class="z-source"> cvd_type</span><span class="z-keyword z-operator z-logical z-python"> not in</span><span class="z-variable z-language z-special z-self z-python"> self</span><span class="z-punctuation">.</span><span class="z-source">MATRICES</span><span class="z-punctuation">:</span></span> <span class="giallo-l"><span class="z-keyword z-control z-flow z-python"> raise</span><span class="z-support z-type z-exception z-python"> ValueError</span><span class="z-punctuation">(</span><span class="z-storage z-type z-string z-python">f</span><span class="z-string">&quot;Unsupported CVD type. Choose from: </span><span class="z-constant z-character z-format z-placeholder z-other z-python">{</span><span class="z-punctuation z-definition z-string z-string">&#39;, &#39;</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">join</span><span class="z-punctuation">(</span><span class="z-variable z-language z-special z-self z-python">self</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-arguments z-python">MATRICES</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">keys</span><span class="z-punctuation">())</span><span class="z-constant z-character z-format z-placeholder z-other z-python">}</span><span class="z-string">&quot;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # 画像を読み込み</span></span> <span class="giallo-l"><span class="z-source"> img</span><span class="z-keyword z-operator"> =</span><span class="z-source"> Image</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">open</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">image_path</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # RGBAの場合はRGBに変換</span></span> <span class="giallo-l"><span class="z-keyword z-control z-flow z-python"> if</span><span class="z-source"> img</span><span class="z-punctuation">.</span><span class="z-source">mode</span><span class="z-keyword z-operator"> ==</span><span class="z-punctuation z-definition z-string z-string"> &#39;RGBA&#39;</span><span class="z-punctuation">:</span></span> <span class="giallo-l"><span class="z-source"> img</span><span class="z-keyword z-operator"> =</span><span class="z-source"> img</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">convert</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">&#39;RGB&#39;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # NumPy配列に変換</span></span> <span class="giallo-l"><span class="z-source"> img_array</span><span class="z-keyword z-operator"> =</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">array</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">img</span><span class="z-punctuation">)</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # 色変換行列を適用</span></span> <span class="giallo-l"><span class="z-source"> matrix</span><span class="z-keyword z-operator"> =</span><span class="z-variable z-language z-special z-self z-python"> self</span><span class="z-punctuation">.</span><span class="z-source">MATRICES</span><span class="z-punctuation">[</span><span class="z-source">cvd_type</span><span class="z-punctuation">]</span></span> <span class="giallo-l"><span class="z-source"> shape</span><span class="z-keyword z-operator"> =</span><span class="z-source"> img_array</span><span class="z-punctuation">.</span><span class="z-source">shape</span></span> <span class="giallo-l"><span class="z-source"> pixels</span><span class="z-keyword z-operator"> =</span><span class="z-source"> img_array</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">reshape</span><span class="z-punctuation">(</span><span class="z-keyword z-operator">-</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 3</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-source"> converted</span><span class="z-keyword z-operator"> =</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">dot</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">pixels</span><span class="z-punctuation">,</span><span class="z-meta z-function-call z-arguments z-python"> matrix</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-arguments z-python">T</span><span class="z-punctuation">)</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # 値を0-255の範囲に収める</span></span> <span class="giallo-l"><span class="z-source"> converted</span><span class="z-keyword z-operator"> =</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">clip</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">converted</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 255</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-source"> converted</span><span class="z-keyword z-operator"> =</span><span class="z-source"> converted</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">reshape</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">shape</span><span class="z-punctuation">)</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # 画像として保存</span></span> <span class="giallo-l"><span class="z-source"> result</span><span class="z-keyword z-operator"> =</span><span class="z-source"> Image</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">fromarray</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">converted</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">astype</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">&#39;uint8&#39;</span><span class="z-punctuation">),</span><span class="z-punctuation z-definition z-string z-string"> &#39;RGB&#39;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-source"> result</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">save</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">output_path</span><span class="z-punctuation">)</span></span> <span class="giallo-l"></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-storage z-type z-function z-python">def</span><span class="z-entity z-name z-function"> main</span><span class="z-punctuation">():</span></span> <span class="giallo-l"><span class="z-source"> parser</span><span class="z-keyword z-operator"> =</span><span class="z-source"> argparse</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">ArgumentParser</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">description</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">&#39;Color Vision Deficiency Simulator&#39;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-source"> parser</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">add_argument</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">&#39;input&#39;</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> help</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">&#39;Input image path&#39;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-source"> parser</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">add_argument</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">&#39;output&#39;</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> help</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">&#39;Output image path&#39;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-source"> parser</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">add_argument</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">&#39;--type&#39;</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-string z-string"> &#39;-t&#39;</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> choices</span><span class="z-keyword z-operator">=</span><span class="z-punctuation">[</span><span class="z-punctuation z-definition z-string z-string">&#39;protanopia&#39;</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-string z-string"> &#39;deuteranopia&#39;</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-string z-string"> &#39;tritanopia&#39;</span><span class="z-punctuation">],</span></span> <span class="giallo-l"><span class="z-variable z-parameter"> required</span><span class="z-keyword z-operator">=</span><span class="z-constant z-language z-python">True</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> help</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">&#39;Type of color vision deficiency&#39;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-source"> args</span><span class="z-keyword z-operator"> =</span><span class="z-source"> parser</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">parse_args</span><span class="z-punctuation">()</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-source"> simulator</span><span class="z-keyword z-operator"> =</span><span class="z-meta z-function-call z-python"> ColorVisionSimulator</span><span class="z-punctuation">()</span></span> <span class="giallo-l"><span class="z-keyword z-control z-flow z-python"> try</span><span class="z-punctuation">:</span></span> <span class="giallo-l"><span class="z-source"> simulator</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">simulate</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">args</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-arguments z-python">input</span><span class="z-punctuation">,</span><span class="z-meta z-function-call z-arguments z-python"> args</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-arguments z-python">output</span><span class="z-punctuation">,</span><span class="z-meta z-function-call z-arguments z-python"> args</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-arguments z-python">type</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-support z-function z-builtin z-python"> print</span><span class="z-punctuation">(</span><span class="z-storage z-type z-string z-python">f</span><span class="z-string">&quot;Simulation complete: </span><span class="z-constant z-character z-format z-placeholder z-other z-python">{</span><span class="z-meta z-function-call z-arguments z-python">args</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-arguments z-python">output</span><span class="z-constant z-character z-format z-placeholder z-other z-python">}</span><span class="z-string">&quot;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-keyword z-control z-flow z-python"> except</span><span class="z-support z-type z-exception z-python"> Exception</span><span class="z-keyword z-control z-flow z-python"> as</span><span class="z-source"> e</span><span class="z-punctuation">:</span></span> <span class="giallo-l"><span class="z-support z-function z-builtin z-python"> print</span><span class="z-punctuation">(</span><span class="z-storage z-type z-string z-python">f</span><span class="z-string">&quot;Error: </span><span class="z-constant z-character z-format z-placeholder z-other z-python">{</span><span class="z-support z-type z-python">str</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">e</span><span class="z-punctuation">)</span><span class="z-constant z-character z-format z-placeholder z-other z-python">}</span><span class="z-string">&quot;</span><span class="z-punctuation">)</span></span> <span class="giallo-l"><span class="z-support z-function z-builtin z-python"> exit</span><span class="z-punctuation">(</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">)</span></span> <span class="giallo-l"></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword z-control z-flow z-python">if</span><span class="z-support z-variable z-magic z-python"> __name__</span><span class="z-keyword z-operator"> ==</span><span class="z-punctuation z-definition z-string z-string"> &#39;__main__&#39;</span><span class="z-punctuation">:</span></span> <span class="giallo-l"><span class="z-meta z-function-call z-python"> main</span><span class="z-punctuation">()</span></span></code></pre> デザイン入門のようなコースをうけていて「色覚異常の方もいるので気をつけましょうね」とか説明されてんだけど、そんな適当な説明じゃなくちゃんとAccessibilityについて説明しろよと思う。だいたい「気をつける」のでなく、世の中にはちゃんとチェックするツールもあるし・・・・