Google
ブログ(iiyu.asablo.jpの検索)
ホットコーナー内の検索
 でもASAHIネット(asahi-net.or.jp)全体の検索です。
 検索したい言葉のあとに、空白で区切ってki4s-nkmrを入れるといいかも。
 例 中村(show) ki4s-nkmr

ウェブ全体の検索

色弱者の色覚に配慮した、カラーユニバーサルデザイン、アクセシビリティ2014年10月24日 09時13分43秒

ASAHIネット(http://asahi-net.jp )のjouwa/salonからホットコーナー(http://www.asahi-net.or.jp/~ki4s-nkmr/ )に転載したものから。
---
 視力がないか、非常に悪い視覚障碍者ではなくても、色がうまく判別できな
い人たちがいます。
 昔は、「色盲」などといっていましたが、差別的だというので、いまは、色
弱者といいます。
 詳しくは、
http://www.cudo.jp/colorud/color_vision/designation
色弱・色盲・色覚異常・色覚障害など色覚の呼称
をどうぞ。

 ユニバーサルデザインの話は、ウェブページだけではないが、ウェブに関して。
 色に関して、ウェブデザイナーは、アクセシビリティ(障碍者対応)の観点か
らも、カラーユニバーサルデザイン(CUD)に配慮すべき。

 自分が使っている色の組み合わせが、色弱の人にどう見えるか、チェックで
きる便利なものがあります。
 神崎正英さんのところ。
http://www.kanzaki.com/docs/html/color-check
色の組み合わせをチェックしてみる
をどうぞ。
 実際にやってみた結果は、最後に。

 ウェブコンテンツのアクセシビリティに関するガイドラインは、
http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/
ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0
W3C 勧告 2008年12月11日
をどうぞ。

 NPO法人「カラーユニバーサルデザイン機構 CUDO」というのがあって、資料
やツールを紹介していますね。

http://www.cudo.jp/
NPO法人 カラーユニバーサルデザイン機構 CUDO

http://www.cudo.jp/colorud
CUD カラーユニバーサルデザイン

http://www.cudo.jp/colorud/color_vision
色覚について・しくみ
http://www.cudo.jp/colorud/color_vision/color_weekness
色弱者について
http://www.cudo.jp/colorud/importance
CUDの重要性
http://www.cudo.jp/colorud/simulation
色覚シミュレーション

 カラーユニバーサルデザインの本や、色弱に関する本は、これまで、いくつ
も紹介してきました。とりあえず、これ。
http://www.amazon.co.jp/exec/obidos/ASIN/4892955655/showshotcorne-22/
カラーユニバーサルデザイン [単行本(ソフトカバー)]
カラーユニバーサルデザイン機構 (著)
 他のリストは、
http://iiyu.asablo.jp/blog/2010/08/16/5290332
色覚異常、色弱、色盲、カラーユニバーサルデザイン
http://iiyu.asablo.jp/blog/2011/08/22/6062740
色弱、カラーユニバーサルデザイン
をどうぞ。

関連:
http://iiyu.asablo.jp/blog/2013/09/05/6971412
なぜ、富士通は「色覚障がい者のための診断ソフトウェア無償提供」を終了したのか
http://iiyu.asablo.jp/blog/2012/06/06/6470355
視覚障碍者にやさしいPDF。PDFのアクセシビリティ
http://iiyu.asablo.jp/blog/2010/08/16/5290332
色覚異常、色弱、色盲、カラーユニバーサルデザイン
http://iiyu.asablo.jp/blog/2006/09/07/514647
哺乳類の色覚
http://iiyu.asablo.jp/blog/2012/09/23/6581860
障碍者バラエティ「バリバラ」、最新!福祉機器、ライオンの音で読むメールマガジン「音メール」
http://iiyu.asablo.jp/blog/2008/05/03/3450550
視覚障害者のIT利用
http://iiyu.asablo.jp/blog/2008/05/07/3480911
Re: 視覚障害者のIT利用
http://iiyu.asablo.jp/blog/2009/11/07/4681885
障がいのある子どもたちのための携帯電話を利用した学習支援マニュアル
http://iiyu.asablo.jp/blog/2012/02/03/6318399
「福岡アクセシビリティセミナー Vol.1」』の案内
http://iiyu.asablo.jp/blog/2011/08/22/6062740
色弱、カラーユニバーサルデザイン
http://iiyu.asablo.jp/blog/2009/07/13/4432673
電子書籍。障碍者向けのマルチメディア書籍関連。DAISY規格。
http://iiyu.asablo.jp/blog/2009/07/15/4435894
電子書籍。障碍者向けのマルチメディア書籍関連。DAISY規格。その2
http://iiyu.asablo.jp/blog/2010/04/07/5003278
進む電子書籍化、「忘れられていた」バリアフリーの取り組み
http://iiyu.asablo.jp/blog/2011/02/23/5699871
EPUB 3にDAISYが入った。\(^O^)/
http://iiyu.asablo.jp/blog/2011/04/07/5781577
世界に大自慢したい日本の会社。障碍者雇用の先駆者「日本理化学工業」
http://iiyu.asablo.jp/blog/2011/04/02/5770965
被災した子どもにマイクを向けないで! 社会的弱者に対する被災支援情報リンク


■神崎さんのチェッカーで、ちょっとチェックしてみました。
 こんな評価をしてくれます。

◎文字色が白で、背景色がオレンジ色に近いもの
color: #FFFFFF
background: #FA665A

色のコントラストに関する評価
文字色1と背景色の明度差
明度差は110/255で、やや不足しています(125/255以上必要)。もう少しコン
トラストを高めましょう。(文字色1の明るさ:255、背景色の明るさ:145)。
文字色1と背景色の輝度比
輝度比は2.952で、不足しています(Level AAの基準を満たすには4.5以上、文
字が大きい場合でも3以上必要)。文字色1の輝度: 1、背景色の輝度: 0.30565。
文字色1と背景色の色差
色差は323/765で、不足しています(500/765以上必要)。読みにくい場合があ
るので、文字色と背景色のRGB各色の値に差をつけましょう。
文字色1と背景色の値
文字色1のRGBは255:255:255、背景色のRGBは250:102:90です。

hover時(マウスカーソルが領域上にあるとき)
color: #FFFFFF
background: #CC6E66

色のコントラストに関する評価
文字色1と背景色の明度差
明度差は118/255で、やや不足しています(125/255以上必要)。もう少しコン
トラストを高めましょう。(文字色1の明るさ:255、背景色の明るさ:137)。
文字色1と背景色の輝度比
輝度比は3.506で、不足していますが、文字サイズが18ポイント以上(太字な
ら14ポイント以上)あるときは、WCAG2.0 Level AAの基準(3以上)は満たし
ています。それよりも字が小さい場合の基準は4.5以上です。文字色1の輝度:
1、背景色の輝度: 0.24949。
文字色1と背景色の色差
色差は349/765で、不足しています(500/765以上必要)。読みにくい場合があ
るので、文字色と背景色のRGB各色の値に差をつけましょう。
文字色1と背景色の値
文字色1のRGBは255:255:255、背景色のRGBは204:110:102です。

◎文字色が黒で、背景色が水色
color: #000000
background: #F8FBE8

色のコントラストに関する評価
文字色1と背景色の明度差
明度差は248/255で、十分です。(文字色1の明るさ:0、背景色の明るさ:248)。
文字色1と背景色の輝度比
輝度比は19.955で、WCAG2.0 Level AAの基準(4.5以上)を満たしています。
文字色1の輝度: 0、背景色の輝度: 0.94777。
文字色1と背景色の色差
色差は731/765で、十分です。
文字色1と背景色の値
文字色1のRGBは0:0:0、背景色のRGBは248:251:232です。

hover時(マウスカーソルが領域上にあるとき)
color: #000000
background: #9BC9F5

色のコントラストに関する評価
文字色1と背景色の明度差
明度差は192/255で、十分です。(文字色1の明るさ:0、背景色の明るさ:192)。
文字色1と背景色の輝度比
輝度比は12.067で、WCAG2.0 Level AAの基準(4.5以上)を満たしています。
文字色1の輝度: 0、背景色の輝度: 0.55334。
文字色1と背景色の色差
色差は601/765で、十分です。
文字色1と背景色の値
文字色1のRGBは0:0:0、背景色のRGBは155:201:245です。

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※なお、送られたコメントはブログの管理者が確認するまで公開されません。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
一富士、二鷹、三は? ひらがなで。

コメント:

トラックバック

_ ホットコーナーの舞台裏 - 2015年04月07日 10時09分34秒

ASAHIネット(http://asahi-net.jp )のjouwa/salonからホットコーナー(http://www.asahi-net.or.jp/~ki4s-nkmr/ )に転載したものから。
---
 ツイートしたら、けっこうリツートしてくださった人がいて、注目