とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

サクッとアクセシビリティを確認するのに便利。色覚シミュレーションアプリ「色のシミュレータ」

サクッとアクセシビリティを確認するのに便利。色覚シミュレーションアプリ「色のシミュレータ」

今回は少しだけアクセシビリティよりのお話。

便利なアプリを紹介します。

 

「色のシミュレータ」です。

色のシミュレータ

色のシミュレータ

  • Kazunori Asada
  • 教育
  • 無料

apps.apple.com

 

アプリの紹介テキストをそのまま引用します。

「色のシミュレータ」は、様々な色覚特性を持つ人の色の見え方を体験するための色覚シミュレーションツールです。医学博士・メディアデザイン学博士である作者により、色彩学の理論を使用して開発されました。

男性の約5%が、赤と緑の色の区別がしにくい、濃い赤が見えにくいなどの色覚的な特徴を持っていると言われています。色覚タイプには主に、C:一般型、P:1型、D:2型、T:3型などがあることが知られており、それぞれのタイプや強度によって色の見え方が違います。

1〜3型の色覚タイプを持つ人は、一般型の人なら異なって見える色の組み合わせの多くが、同じ色に見えてしまうという特徴があります。例えば、1型や2型の人は、赤と緑、ピンクと水色などの区別が難しい場合があります。

これらの色の見えは、色を感知する錐体細胞の働きを計算することによって、ある程度予測することが可能です。

「色のシミュレータ」は、内蔵カメラから得た動画像や保存された写真画像をリアルタイムに変換し、それぞれの色覚タイプ(2色覚)ではどのように色が見えるのか、シミュレーションを行います。

 

というわけで、カメラ起動して

見るだけで、各色覚タイプの見え方を

シミュレーションすることが可能です。

 

色覚シミュレーションアプリ「色のシミュレータ」のスクショ

色覚シミュレーションアプリ「色のシミュレータ」の例

 

色使いや視認性はWebサイトでは重要です。

このアプリを使えば、色覚特性を持つ人の

色の見え方が体験できるので、見えづらい色使い

になっていないか、視認性が悪くなっていないか

チェックができるので、おすすめです。

 

 

アクセシビリティが要件になるweb案件

クライアントワークでアクセシビリティが

要件に入ることがあります。

役所や自治体系のWebサイトや、

空港などの公共施設、メディア系のWebサイト

など幅広いユーザをターゲットとしている

サイトではだいたい必須の要件です。

 

 

どこまでやるかの指標が必要

どこまでやるかというところもありますが、

基本中の基本である「視認性」や「色」は

こういったツールを使ってチェックするのが

工数も少なく済むでしょう。

 

背景色やテキスト色などをユーザに選択させる

などアクセシビリティを考慮して実装すると

なるとそこそこコストもかかりますし、

専門知識も必要になります。

 

自治体系のWebサイトをよくやっているような

Web制作会社はノウハウもあり、得意として

そういった案件をとっていく制作会社もあると

おもいます。

 

ただ、そこまでの要件ではないサイト、

一般的なWebサイトであればこういった

ツールやアプリでサクッと確認しておく程度で

十分だと思います。

 

今回紹介したもの以外でも、色覚

シミュレーターアプリやツールは

いろいろありますが「色のシミュレータ」が

一番かんたんで使いやすい印象でした。

 

参考:

www.color.or.jp designcolor-web.com

 

 

アクセシビリティ方針が参考になるwebサイト

アクセシビリティをどこまでやるか、

ガチでやるのか。

方針はさまざまですが、総務省や内閣府の

Webサイトではアクセシビリティ方針が

しっかりと掲載されています。

アクセシビリティが要件のサイトを製作する

機会があれば、見ておいて損はないでしょう。

 

 

アクセシビリティの要件をざっくりいうと、

障害のお持ちの方や、子供からお年寄りまで、ユーザーの状況に関わらず快適に使用できるサイトの設計、というところでしょう。

 

総務省や内閣府が推奨する「JIS X 8341-3:2016のウェブアクセシビリティ達成等級 AA」に準拠した構成を目指す、もしくはこれと同等のレベルで対応となると

かなりハードルが高くなり、コストもかかります。

 

JIS X 8341-3:2016 に「完全」準拠、100%対応している

Webサイトはそうそうないと思いますし、

対応するにはコストや時間、工数、工期なども現実的でない

ことが多いので、あくまでこういったアクセシビリティのJIS基準を知った上で、

理解して、つくるというところが重要だと思います。

 

 

富士通の達成基準はものすごく参考になるのと、

ここまで達成していてすごいな、と思うので紹介。

JIS X 8341-3:2010 達成基準解説 - 富士通

 

あと取り組みとしていいなと思ったのが、

新千歳空港のwebサイトです。

バリアフリー用のページを別に用意しています。

新千歳空港ターミナルビル

 

 

そのほか、アクセシビリティの参考になるwebサイトはこちら

 

知らないで作るのと、知っていて、

やるやらないを判断・選択するのは全然違いますしね。

知識として知っておきたいところです。

 

 

まとめ

総務省や内閣府が推奨する「JIS X 8341-3:2016のウェブアクセシビリティ達成等級 AA」に準拠しなくても、多様で幅広い年齢層をターゲットとしたwebサイト設計、

デザイン設計を行う、というスタンスが重要ですね。

画像にテキスト情報(alt属性)をつける、

十分にコントラストのある文字色と背景色を使う、

サイト利用者が文字サイズや背景色を変更出来るようにする、

リンクには下線を入れるなどの基本を徹底して、

親切なサイト設計を目指しましょう。