フォローしました拝読させていただいている、図解書きの山田太郎さんが、色彩検定UC級についてのつぶやきをnoteに書かれていたので、これに今日は関連してのお話。今日のタイトルは「re:」にしてみました..。余談ですが、メールのre:って、responseやReply、returnじゃないんでしたよね..あ、この話は明日にしましょう。色彩検定UC級へのリンクについては山田太郎さん@図解書き経由でぜひ。8341-3:2016』にも、色に関する達成基準がある。色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。理解する端的に言えば、色だけで情報を示さないようにしましょうということ。色のとらえ方に限界がある場合、色に頼った情報は伝わらない、もしくは誤って伝わってしまう。「赤色の部分をクリック」といっても、単に色を変えただけでは赤が見えにくい人にとっては、他の色と区別が付きにくくなる。色だけではなく、太字、アンダーライン、グラフであれば網掛けにして種類を変えるなど、色がなくても情報が伝わるよう工夫する。Webに掲載する資料をExcelでグラフを作るときは、Excelにお任せして終わりではなく、色に頼った情報になっていないか、また後述するコントラスト比は達成できているか確認するといい。コントラスト比がある。理解するなお文字の大きさも関連している。コントラスト比がある。テキストが日本語か否かでも若干変わってくる。以上のコントラスト比をもたせるコントラストにはもう1つある。こちらは「高度」とある通り適合要件が厳しい。コントラスト比がある。理解するカラーコントラストのチェックツールコントラスト比があること、また、それは文字の大きさにも依ることは判っても、実際チェックしようとした場合、どう判別したら良いか判らないと思う。カラーコントラストについてはPhotoshopやillustratorでカラー校正の設定ができたかと思うが、いくつかチェックツールがある。おススメは「カラー・コントラスト・アナライザー」。無償のソフトで、Windows用とMac用があるので適宜ダウンロードして使用する。リンク先は英語だが、実際の操作画面は日本語になっており、作業もカラーピッカーで色を指定すると容易に判定してくれる。ワイ」にチェック方法が記載されているので、そちらをご参照頂きたい。2013J」は、色のチェックツールです。前景色と背景色のコントラストをチェックしたりweba11y.jpなお、ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。最後に、テスト画像をチェックした事例を2つ。off」の文字色と背景色の組み合わせを変えたパターン3つ用意したので、これをチェックしてみたい。黒文字の部分は大丈夫だが、赤文字は通常の文字サイズだとAAAには不適合。このSALEは少なくとも18ポイント以上ならばAAAでも適合。目指すレベルがAAならば、いずれにせよ適合。中央の画像の場合(黒は省略し、赤字のSALEの部分だけ取り上げます)赤文字部分は通常サイズはAAもAAAも不適合。大きな文字のAAのみ適合。右は見るからに文字と背景の濃淡が似ていてカラー・コントラスト・アナライザーで判定するまでもないかも知れないが、一応。写真に文字をのせる次に写真に文字を載せた事例。写真に文字を載せてコントラストが足りない時は、縁取りをしたり背景を敷くなどしてコントラスト比を稼ぐといった工夫ができる。この事例では、空の部分に白い文字を入れているが、カラー・コントラスト・アナライザーを使うと不適合になっている。そこで、該当部分にあしらいを付けてみて再チェックし適合となった。以上、Webアクセシビリティでの色に関するJISと、コントラスト比をチェックできる便利なツールのご紹介でした。©moyaダウンロード#アクセシビリティ#Webアクセシビリティ#a11y#ウェブアクセシビリティ#色彩検定#色彩検定UC級#カラーユニバーサルデザイン#カラーコントラストこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。現在放送大学でPDFのアクセシビリティを卒業研究中。noteはそのメモを兼ねてます。ヘッダー写真はnzで私が撮影しました。【ご寄付のお願い】有料noteの売上やサポートはnzクライストチャーチ地震の復興支援に使わせて頂いております。サポートをする「スキ」を押してクリエイターを応援しよう![謎々]5人でかくれんぼ。ウェブアクセシビリティ担当。スキmoyaさん、ご紹介ありがとうございます!むむう、、、色彩検定UC級読み終わりましたが、moyaさんは100歩くらい先に行っている感じですねΣ(゚д゚lll)コントラスト比というのは初めて聞いたのですが、リンク先を見ると相対輝度の比で、光の三原色のRGBの値から計算できるのですね。専門外で自分で計算するのは実用的ではないから、確かに調べる時はご紹介のツールを使うのが現実的だと感じました。iPhoneアプリとして、「色のシュミレータ」というものが使いやすいです。スキ山田太郎さん、おはようございまーすもうUC級読み終えたんですね!さすが出来る人は早い...どんどんこなしますね。ご紹介ありがとうございます!色のシュミレーター、だいぶ増えましたね〜。浅田一憲氏のシュミレーターは、便利ですよね。これを使って社内セミナー参加者に観てもらうと理解が進みます。説明下手なので、こういうツールはありがたいです。アプリなので参加者がその場で使えるし(^。^)以前書いた記事の最後に出てきた方が、同じ方ですhttps://a11ytips.info/n/n8cdb6600b992あと、この方の「ゴッホの本当のすごさを知った日」というblogもわかりやすいです。スキいえいえ、これ実は投稿した時点で、すでに半分くらい読み終えてるというトリック(笑)なんですよ。リンク先拝見し、確かにゴッホがすごく繊細な色使いになっていて驚きました。最後の【そしてこれは、ともすれば「正常色覚の人の方が(色を見て理解するという点では)色覚異常の人より優れている」と思いがちな私たちに、ある点では「色覚異常の人の方が正常色覚の人より優れている」ことを示す実例のひとつだと言うことができるかもしれない。人間はそれぞれで、ある点では誰かより優れていることもあれば、また別な点では他の人が優れていることもあるというごく自然なことだ。】はまさに!だと思いました。これは色覚の話ですが、感性、そして人生全般にも当てはまる話だと感じました。スキ山田太郎さん、なるほど、超超速読術かと(笑)ゴッホの色遣い(としている絵)でみると、絵の魅力が更に増しますよね。こちらこそ、また色々教えて頂きたいです、よろしくお願いします。UC級読んでみます!いつもありがとうございます。TakahashiSketchで文字種を指定して混植ができるプラグインをつく...51くっきーさんトーン処理の基礎17縛(ふぅ)[謎々]5人でかくれんぼ。