ChatGPTで授業準備、採点は新しいステージへ！AIを活用した教師の業務革新（2024）
生成AIの基礎知識　〜AI時代の新常識〜
無料でGPT-4を使え！ – 君たちはどうジピるか
教師向けFAQ：OpenAIによるChatGPT解説【日本語訳と解説】

カラーユニバーサルデザインに便利なChrome拡張機能で、スライドを色覚バリアフリーにする

Chrome拡張機能で、色覚バリアフリーなスライドを作成する #ほぼ週刊ググレカス
Chrome拡張機能で、色覚バリアフリーなスライドを作成する
2021.03.17
👉教師のためのChatGPTプロンプト集を入手
教師のためのChatGPTガイド、予約受付中！

「教師のためのChatGPTガイド」好評発売中！

みなさん、自分のスライドが色弱（色盲）の人からどう見えるか、考えたことはありますか？あなたが強調しているつもりの赤い字は、ぜんぜん目立っていないかもしれません！

このブログの今月のサポーターの皆さんにお礼を申し上げます：
Li02380さん、Amiさん、Cocoさん、ゴンタ＝ミチさん、ナゾの冒険家さん、ヒロパンマンさん、びびあんさん、ミニヤンさん、ありがとうございます！🎉

色弱（色盲、color blind）とは

人間の目の網膜にある赤、緑、青を感じる3種類の細胞のうち、どれかの機能が損なわれた状態を「色盲」と呼ぶそうです。日本では男性の5％、女性の0.2％に見られるとのこと。めっちゃ多くないですか？これは遺伝学的には遺伝的多型（血液型のような違い）でしかなくて、「異常」とは呼べないのだそうです。

なお、色盲、色弱、視覚障害、等々の呼称があり、なかでも「色盲」は差別用語として使われてきた歴史もあるようなので、ここでは「色弱」と呼ぶことにします。科学的には「色弱」の定義はないのだそうですが、近年では「色覚に関する弱者」という意味合いで使われることが多いようです。

色覚バリアフリーとは

色弱の人でも見やすいような配色にもとづいたデザインをすることです。英語圏では”Color Blind Friendly”という言い方をするようです。「カラーユニバーサルデザイン（Color Universal Design）」という呼び方もあるみたいです。

色弱者の見え方がわかるChrome拡張機能

色弱の人には、ある特定の範囲の色の区別がつきにくくなります。それが一体どのように見えるのかを教えてくれるChrome拡張機能があります。さっそく使ってみましょう！

RGBlind

RGBlindで、様々な色弱の人の見え方を体験することができます。試しにグーグルスライドを作ってみましたので、色の見え方がどのように変わるのかをご確認下さい。

RGBlind – Chrome Web Store

これは2種類の色弱の見え方がわかります。上のColorblindingと比べるとパターンが少ないのですが、色の見え方の変化がより強烈です。ここまで見て分かることは、黄色のマーカーは割と無難な選択なんだな、ということです。

Let’s get color blind

Let’s get color blind – Chrome Web Store

これは赤、緑、青の色弱に、より複雑なダルトナイズ（ダルトン化）というアルゴリズムを組み合わせてより多くのパターンをシミュレートできます。

Daltonize

Daltonize – Chrome Web Store

同じくダルトナイズが売りの拡張機能。

テキストをマーカーを引いたように強調表示（ハイライト）しても、フォントの色を変えても、他の色と見分けのつかない場合がありますね。それも、そのようなケースがかなり多いことがよくわかります。これは資料を作る側は気をつかないといけませんね！

Grayscale the Web – Save Sites

Grayscale the Web – Save Sites – Chrome Web Store

一見カラフルなデザインでも、グレースケールに変換した時に色の区別がつかない場合があります。テキストのハイライトや、グラフの色設定でやってしまいがちですよね。

この拡張機能は、ブラウザのタブ毎にグレースケール表示をするかどうか保存しておける拡張機能です。モノクロのプリンターで印刷した時にどのように見えるかも、この機能でわかりますね。

で、どれがいいの？

拡張機能はどれでも、自分で使いやすいと思うものを選べばいいと思います。そして、自分が作った資料の見え方をチェックするのもいいし、あるいは身近に色弱の人がいる場合はその人の見え方に近いフィルターを使えば良い、ということになります。

でも一番良いのは、初めから色覚バリアフリーなデザインを心がけてすべての資料を作ることですね。そのために知っておくべきことは結構多いです。以下に簡単にまとめますが、もっと詳しく知りたい方は参考文献がどれもおすすめなので、（特に「配色のバリアフリー」が分かりやすいです！）ぜひご覧になってみて下さい。

気をつけること

  1. 赤と緑は避ける。青（水色）とオレンジが◎。
  2. 色をたくさん使わない。できれば2〜3色程度にする。
  3. 色だけに頼らない。白抜きや網掛け等のパターンを組み合わせる。
  4. 色弱だけでなく視覚過敏の人もいるので、コントラストを強くしない。
  5. すごい人の作ったカラーパレットや推奨配色セット使う

筆者も強調したいときは安易に赤を使っていましたが、これからは改めようと思います。とても勉強になりました。

「色だけに頼らない」は重要で、絵文字⚠️やアイコンを併用して注意喚起するのがいいでしょう。

「コントラストが強い」とは、白の背景に黒の文字のようなことです。これだとコントラストがきつすぎて優しくないので、文字色をグレーにするとよいです。あるいは背景をクリーム色にするのも良いようです。

色覚バリアフリーなカラーパレットを作ってみた

Googleスライド用に、色覚バリアフリーなカラーパレットを作ってみました！このリンクからGoogleスライドがコピーできますので、ご自由にお使い下さい。

このパレットは、”Color Universal Design (CUD) – How to make figures and presentations that are friendly to Colorblind people –” という文献で提案されているパレットのRGB値をHEXに変換したものです。

参考文献

Sponsored link

コメント

Copied title and URL