やってほしくない緑とオレンジの使い方(カラーUDの話)｜ほうじ | 少数色覚デザイナー
少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を
色弱の人にも見分けやすい色の「MSワードⓇ」や「エクセルⓇ」を作ってみました。 – NPO法人 カラーユニバーサルデザイン機構 CUDO
自由研究者の冬の自由研究No.x として私的にフェイスブックや個人のサイトなどで公開しておりましたが、こちらでも掲載させていただくことにいたしました。自由研究のつぶやきをなるべく原文のままで載せています。コメントを受付ますのでどうぞよろしくお願いいたします。頻繁にⓇがついて申し訳ありません。 ［この自由研究について］ ＊この研究は、推奨配色セット委員会や新JIS安全色普及委員会、日本規格協会、microsoftⓇとは関係ありません。また現在のテーマパレットは実験用ですので、あくまでも使用は自己責任でお願いします。 ＊ダウンロード、解凍、読み込み、使用中のトラブル、その結果や経緯において当方は一切の責任を持ちません。ご了解の上、お使いください。（投稿者：伊賀公一） はじめに 「エクセルⓇのグラフの色がわかりにくい」という話をよく聞きます。 何とかならないのか？！と思っておりましたが、標準搭載
パワポやExcelのグラフを色弱者にも分かりやすくするセットを有志が無料配布 作者「将来は標準設定に」
プレゼン資料の作り方を解説した本の中で、色を効果的に使ったグラフやスライドが「良い例」として紹介されることがあります。 ですが色を多用したプレゼンテーションには落とし穴も存在します。日本人男性の約5％、女性の約0.2％は特定の色の識別が苦手とされており、そうした色弱者にとっては「むしろ分かりにくいデザイン」になってしまう可能性があるのです。 カラーユニバーサルデザイン機構（CUDO）副理事長である伊賀公一さんは、前述の問題を解決するために、PowerPointやExcelの配色セットを「誰にでも分かりやすい色」であるカラーユニバーサルデザイン（CUD）に変更する方法を公開しました。 パワーポイントの色が分かりやすい色に CUDで作られた「色弱者にも分かりやすいプレゼン資料」 その方法とは、Microsoft Officeの書式設定を一括で変更する「テーマ」機能を使うというもの。CUDO公式
白金派？ 青黒派？ どちらかわからない謎の色のドレスの写真で世界がまっぷたつに
白と金か、青と黒か。どちらの色なのかわからないドレスの写真で、今世界がまっぷたつに割れています。 そりゃ、白金でしょ……えっ、違う？！（画像はTumblrより） 元々は海外のサイトで話題になったもので、投票を見たところ圧倒的に「白と金色」が優勢。 圧倒的ですね…… これを見て、日本のTwitterでも「白金派」と「黒青派」に分かれて、話題になっています。「青黒」「白金」で検索してみてください。 今回の写真は後ろの眩しい光と、前から当てられている光で、どちらから見るべきか混乱を招いている様子。ネットで売られている商品画像を見ると、一応、実物は「青黒」が正解のようです。 これなら確かに青と黒に見えますね（画像：Amazon.co.uk） あまりにみんなの意見がわかれているので、多くの人が考察をしています。 さて、あなたはどっち派？ （たまごまご） advertisement 関連記事 こいつ一
「白と金」「いや青と黒だ」あなたはどっちに見える？ 1枚の写真をめぐりネットで激論
ある1枚の写真をめぐり、ソーシャルメディアで激論が交わされている。ドレスを写したなんの変哲もない写真だが、見る人によって色が違うというのだ。 「白地に金のレースだろ？」「正気かい？ どうみても青と黒だよ」──ある1枚の写真をめぐり、ソーシャルメディアで激論が交わされている。ドレスを写したなんの変哲もない写真だが、見る人によってドレスの色が違うというのだ。Twitterではセレブも次々に参戦し、世界で議論が盛り上がっている。 写真はあるユーザーがTumblrに投稿したのが発端とされる。そこには店頭らしき場所に陳列されているドレスが映っているが、この服の「色」が問題に。ある人は「少し暗いところに置いてある、白地に金色のレースのドレス」といい、ある人は「青地に黒のレースのドレス」だというのだ。 写真はまたたく間に世界中に拡散。歌手のテイラー・スウィフトさんが「混乱して恐いけど、明らかに青と黒」と
なぜドレスの色の錯覚はおきたか？-色の恒常性- - Sideswipe
ドレスの写真って？ インターネットで見る人によって二通りの色に見えるドレスの画像が話題になっていました。結論からいえばこのドレスは青と黒なのですが、「青と黒に見える」派と「白と金に見える」派に分かれるのです。あなたはどちらに見えますか？ 引用元: http://swiked.tumblr.com/image/139988249090 「ディスプレイが違うから」といった説明も見受けられますが、同じディスプレイを見て意見が割れている方もいることから、影響はあるにしても主要因ではなさそうです。 また、「年をとると網膜の細胞が衰えて云々」という意見もありますが、老若男女はあまり関係なく青黒派と白金派がいるので、こちらの影響も少なさそうです*1。 それではこの理由について解説してみます。間違えてたら教えてください。 30秒で分かる説明 人間は周囲の状況が変わっても同じものは同じ色で見えるように脳内で
ColorTester (JIS X 8341-3:2010 に基づき背景色と前景色のコントラストチェックを行うソフト)を公開します。 - アルファサード株式会社
ColorTester (JIS X 8341-3:2010 に基づき背景色と前景色のコントラストチェックを行うソフト)を公開します。 ColorTester - JIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づき背景色と前景色のコントラストのチェックを行うソフトウェア ※9月6日(土)更新 : 更新しました(Ver. 1.0 r33)。より正確に画像から色を取得できるようになりました。 ColorTesterは2色のコントラスト比を計算し評価するツールです。コントラストの評価はJIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づきます。Mac OS X及びWindowsに対応しており、日本語と英語に対応しています。 コントラスト比 - ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 Mac OS (OS X 10.7以
【検証】クリックされるボタンの色は？ | WebNAUT
検証したパターン 調査結果 全アクセスのコンバージョン率（CVR） 結果は下記の通りとなりました。 なんと！緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか？ 「どこから流入したか」によって結果に違いがあった 調査対象ページにアクセスしたユーザーは、何かきっかけがあって、ビーワークスの採用に興味を持ってアクセスしているはずです。そこで、どこから流入したのか、「参照元」のセグメント別に結果を分けて分析してみます。 こうやってセグメント別に分けてみると、参照元によってCVRの平均値自体に大きな差があることがわかります。CVR順に並べると、検索 ＞ WebNAUT ＞ なめぱら という結
Photoshop・これからのグレースケール画像のつくりかた
グレースケール変換の方法は多々ありますが、どうも「モード」→「グレー」がDisられる傾向があるようなのでそれは違うよ！というところから少し。 モード→グレーは結構優秀 （実際にはモードから変換するのではなくて、「編集」→「プロファイル変換」を勧めます。これだけは設定しておきたいPhotoshopショートカットキーの小ネタ） これを変換してみましょう。 (以下マウスオーバーでこの画像に変わります） モード変換グレー 他と比べると濃いのですが、色の濃度変換は最も感覚的に近いかと。PCの方はカーソル乗せたり外したりしてみてください。 参考：osakana.factory – グレースケールのひみつの３番目 どちらにしても、オフセット印刷向けに変換するのであればこの後の調整は「必須」です。これはどの方法でも同じです。 LabモードLチャンネル Lab変換後Lチャンネルのみ表示させ、そのままモード変
津波警報、テレビ各局が色を統一 色覚障害などに配慮
印刷 メール 津波警報、テレビ各局が色を統一 色覚障害などに配慮 関連トピックス 地震 津波速報の色づかいを新たにした速報システムのサンプル画面。大津波警報は紫、津波警報は赤、津波注意報は黄色で表示される。陸地は灰色、海は濃い青＝日本テレビ提供 津波警報や注意報を地図でテレビ画面に表示する際、局によって異なっていた色合いを統一することが決まった。色覚障害者に見分けがつきにくい色の組み合わせも使われ、改善が必要と指摘されていた。複数の局から相談を受けた色覚研究者の仲立ちで各局の協力が実現した。 統一のきっかけになったのは昨年２月のチリ地震。１９９３年の北海道南西沖地震以来、１７年ぶりに「大津波警報」が出された。「大津波警報」「津波警報」「注意報」が、赤、黄色、オレンジ、桃、白など局によってまちまちの配色で表示された。全国で長時間、津波速報の画面が放映され、色覚障害者からは「大津波と津波を見分
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
【MSM2009】ソフトウェア開発におけるカラーユニバーサルデザインの重要性 | インサイド
ソラノイロ代表でカラーユニバーサルデザイン機構（CUDO）副理事長の伊賀公一氏はMSM2009で23日、「ソフトウェア開発におけるカラーユニバーサルデザインの重要性」と題して講演しました。 一級カラーコーディネータで視覚情報デザインコンサルタントながら、自身も色弱者（P型強度）である伊賀氏は、多様な色覚を持つ人にとって使いやすいソフトウェア開発の重要性について語りました。 はじめに伊賀氏は、日本では2003年まで学校教育で色覚検査が行われてきたため、社会に色弱アレルギーがあると指摘しました。実は色弱は下戸などと同じく、遺伝子の多形に伴う現象にすぎません。そのためCUDOでは健常者、色弱者などという呼び方ではなく、C型（Common）、P型（Protanope）、D型（Deuteranope）、T型(Tritanope)、A型（Achromat）という呼称を採用していると説明しました。なおC
FWD勉強会vol.1資料公開
2007年10月27日に開催された「PHP in Fukuoka ＆ 福岡Webデザイナーズ合同勉強会」で使用した資料を公開します。 FWD勉強会vol.1資料公開［PDF:1.4MB］ 当日伝えきれなかったことや、良い忘れていたこと、準備不足だった部分を補う意味で、付録を追加してから公開しようと思っていましたが、時間がかかりそうだったので、後日余裕ができてから公開したいと思います。 今回は「いろのはなし」というタイトルで、色彩調和をテーマに話をさせていただきました。学生の頃に色についての授業を受けているはずですが、あまり勉強をしていなかったので詳しいわけではなく、少し知っている程度でした。そこでいろんな本を読んだりしながら勉強をし直すことになりました。 色の話はとても範囲が広く、調べていくうちに全体をカバーすることなど到底無理であることが判ってたので、要望のあった「色彩調和」に絞ることに
ブラックベースの暗いウェブデザインで気をつけたいポイント
ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象
ウェブページのカラーコントラストをチェックする -Check My Colours
ウェブページに使用されている全てのテキストと背景のカラーコントラストが充分であるかどうかチェックしてくれるオンラインサービス「Check My Colours」を紹介します。 カラーコントラストをチェックした結果画面 当サイトを試したところ、上記のようになりました。 テキストと背景の判定はスタイルシートから行っているようで、各要素ごとに使用している色とそのサンプル、コントラストが充分かが一覧で表示されています。 テキストが無い箇所や色指定が無い箇所の判定も行うため、一覧は長くなりますが、エラー箇所のみ表示することも可能です。
asahi.com（朝日新聞社）：色のバリアフリーへ２０色 色見本、デザインに活用 - 社会
よく使われる色づかい（上）と、誰でも見分けやすいように考えられた色（下）。厳密な色再現ではない＝伊藤准教授提供 誰でも見分けやすいように工夫した色見本を、東京大や日本塗料工業会などが作った。色覚障害や白内障の人のほか、一般の人にも色を実際に見てもらい、２千色以上から２０色に絞り込んだ。塗料用に続き、印刷インキ用の色見本も近く完成、デザイン業界などで使ってもらう予定だ。 東大の伊藤啓・准教授（分子神経生物学）は印刷インキメーカーのＤＩＣなどと協力、２年前から色見本づくりを進めてきた。実生活で使いそうな色を、屋外で日にあてたり、古い蛍光灯の下に置いたりして、色覚障害の人や白内障手術を受けた人のべ約４０人に見てもらった。 これまでよく使われた色づかいでは、赤と緑は色覚障害の人にとってまぎらわしく、黄色は白内障の人には明るすぎたという。そこで赤はオレンジ寄りに、緑は青みを強く、黄色は濃くした
色覚障害：業界団体が初の色見本 色遣いもバリアフリーに - 毎日ｊｐ(毎日新聞)
色覚障害や白内障などの人が見分けやすい色見本（２０色）を東京大、日本塗料工業会などが作成した。色覚障害の人が見分けにくい色は分かっていたが、色覚の多様性に配慮した実用的な配色セットはなかったという。 色覚障害は色の感じ方にかかわる遺伝子の変異によって起こる。赤と緑、青と紫など特定の色が見分けにくく、日本人男性の２０人に１人いると推定される。白内障では紫から青が暗く見え、明るい黄色と白も識別しづらいという。一方、カラーの路線図など公共施設の案内表示や電化製品の操作画面などのカラー化が急速に普及、色の見分けにくさが問題になっている。 東京大の伊藤啓准教授（分子神経生物学）らは、色覚障害者ら延べ約４０人に、一般人が認識する約３０の色の群の中から見分けにくい色を選んでもらい除外し、残った色の中から区別しやすい２０色を決めた。赤はややオレンジに近く、黄色は白と区別しやすいようにやや濃くなっている。紫
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
青黒？白金？このドレス何色に見える？Twitterで大論争
色見本大辞典 伝統色や366日の誕生色占いのWEB色見本サイト