見出し画像

re: 色彩検定UC級

拝読させていただいている、図解書きの山田太郎さんが、色彩検定UC級についてのつぶやきをnoteに書かれていたので、これに今日は関連してのお話。なので、今日のタイトルは「re:」にしてみました‥。

余談ですが、メールのre:って、responseやReply、returnじゃないんでしたよね‥あ、この話は明日にしましょう。

色彩検定UC級へのリンクについては山田太郎さん@図解書き経由でぜひ。(山田太郎さん、勝手に便乗ごめんなさい)

Webアクセシビリティに関する日本工業規格の『JIS X 8341-3:2016』にも、色に関する達成基準がある。

情報を色だけで伝えない

1.4.1 色の使用: 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 (レベル A)
WCAG 2.0 解説書 色の使用: 達成基準 1.4.1 を理解する

端的に言えば、色だけで情報を示さないようにしましょうということ。

白黒で資料を印刷したら、グラフが判り難くなったという経験はないだろうか?
ロービジョン、色覚異常、高齢者など色のとらえ方に限界がある場合、色に頼った情報は伝わらない、もしくは誤って伝わってしまう。
例えば「赤色の部分をクリック」といっても、単に色を変えただけでは赤が見えにくい人にとっては、他の色と区別が付きにくくなる。色だけではなく、太字、アンダーライン、グラフであれば網掛けにして種類を変えるなど、色がなくても情報が伝わるよう工夫する。

Webに掲載する資料をExcelでグラフを作るときは、Excelにお任せして終わりではなく、色に頼った情報になっていないか、また後述するコントラスト比は達成できているか確認するといい。

テキストと背景色のコントラスト比

1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)
WCAG 2.0 解説書コントラスト (最低限) :達成基準 1.4.3 を理解する

なお文字の大きさも関連している。

大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。

またテキストが日本語か否かでも若干変わってくる。

太字でないテキストが 18 ポイント (日本語は 22 ポイント) 未満、太字のテキストが 14 ポイント (日本語は 18 ポイント) 未満の場合
テキスト(及び画像化された文字)とその背景の間に、少なくとも 4.5:1 以上のコントラスト比をもたせる

太字でないテキストが少なくとも 18 ポイント (日本語は 22 ポイント) 以上、太字のテキストが少なくとも 14 ポイント (日本語は 18 ポイント) 以上の場合
テキスト(及び画像化された文字)とその背景の間に、少なくとも 3:1 以上のコントラスト比をもたせる

コントラストにはもう1つある。こちらは「高度」とある通り適合要件が厳しい。

1.4.6 コントラスト (高度) : テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く<以下省略>: (レベル AAA)
コントラスト (高度) :達成基準 1.4.6 を理解する

カラーコントラストのチェックツール

コントラスト比があること、また、それは文字の大きさにも依ることは判っても、実際チェックしようとした場合、どう判別したら良いか判らないと思う。カラーコントラストについてはPhotoshopやillustratorでカラー校正の設定ができたかと思うが、いくつかチェックツールがある。

おススメは「カラー・コントラスト・アナライザー」。
無償のソフトで、Windows用とMac用があるので適宜ダウンロードして使用する。

リンク先は英語だが、実際の操作画面は日本語になっており、作業もカラーピッカーで色を指定すると容易に判定してくれる。

また、株式会社インフォアクシア様が運営されている「エー イレブン ワイ」にチェック方法が記載されているので、そちらをご参照頂きたい。

なお、ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。
(とは言うものの、いま、Web上でもブランディングするのが通常だから、Webアクセシビリティも意識してロゴデザイン等して頂けるといいな)

カラー・コントラスト・アナライザー チェック例

最後に、テスト画像をチェックした事例を2つ。

例1 文字色と背景色の組み合わせ

テストデータは「SUMMER SALE MAX 80% off」の文字色と背景色の組み合わせを変えたパターン3つ用意したので、これをチェックしてみたい。

左の画像の場合

黒文字の部分は大丈夫だが、赤文字は通常の文字サイズだとAAAには不適合。ただし、このSALEは少なくとも18ポイント以上ならばAAAでも適合。なお目指すレベルがAAならば、いずれにせよ適合。

中央の画像の場合

(黒は省略し、赤字のSALEの部分だけ取り上げます)
赤文字部分は通常サイズはAAもAAAも不適合。大きな文字のAAのみ適合。

右の画像の場合

右は見るからに文字と背景の濃淡が似ていてカラー・コントラスト・アナライザーで判定するまでもないかも知れないが、一応。

例2 写真に文字をのせる

次に写真に文字を載せた事例。写真に文字を載せてコントラストが足りない時は、縁取りをしたり背景を敷くなどしてコントラスト比を稼ぐといった工夫ができる。
この事例では、空の部分に白い文字を入れているが、カラー・コントラスト・アナライザーを使うと不適合になっている。そこで、該当部分にあしらいを付けてみて再チェックし適合となった。

以上、Webアクセシビリティでの色に関するJISと、コントラスト比をチェックできる便利なツールのご紹介でした。
本日はこれにて。

関連するnote

(了)

ヘッダー写真 撮影地 ニュージーランド Waitangi Treaty Grounds ©moya

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

最後までご覧いただきありがとうございます! 現在放送大学でPDFのアクセシビリティを卒業研究中。noteはそのメモを兼ねてます。ヘッダー写真はnzで私が撮影しました。 【ご寄付のお願い】有料noteの売上やサポートはnzクライストチャーチ地震の復興支援に使わせて頂いております。

[謎々]○FMAM○○ASOND ○に入るのは
21

#a11y tips:PDFとウェブアクセシビリティ ...

仕事はウェブアクセシビリティ屋、プライベートではnzでトレランしたくて走っているmoyaです。民間企業勤務後、中央省庁でウェブアクセシビリティ担当。放送大学でPDFのアクセシビリティを卒業研究。電子情報通信学会 正員、ウェブアクセシビリティ推進協会 賛助会員

アクセシビリティ全般(Web以外) #a11y

ウェブアクセシビリティ以外のアクセシビリティ全般の情報、また関連情報
1つ のマガジンに含まれています

コメント4件

moyaさん、ご紹介ありがとうございます!

むむう、、、色彩検定UC級読み終わりましたが、moyaさんは100歩くらい先に行っている感じですねΣ(゚д゚lll)

コントラスト比というのは初めて聞いたのですが、リンク先を見ると相対輝度の比で、光の三原色のRGBの値から計算できるのですね。

専門外で自分で計算するのは実用的ではないから、確かに調べる時はご紹介のツールを使うのが現実的だと感じました。

ちなみに、配色の適切さ(色覚障害がある方にもきちんと区別できるか)をチェックする iPhoneアプリとして、「色のシュミレータ」というものが使いやすいです。moyaさんはご存知だと思いますが、関連情報として紹介まで

色のシュミレータ
http://asada.tukusi.ne.jp/cvsimulator/j/
山田太郎さん、おはようございまーすもうUC級読み終えたんですね!さすが出来る人は早い…どんどんこなしますね。ご紹介ありがとうございます!色のシュミレーター、だいぶ増えましたね〜。浅田一憲氏のシュミレーターは、便利ですよね。これを使って社内セミナー参加者に観てもらうと理解が進みます。説明下手なので、こういうツールはありがたいです。アプリなので参加者がその場で使えるし(^。^)以前書いた記事の最後に出てきた方が、同じ方ですhttps://a11ytips.info/n/n8cdb6600b992
あと、この方の「ゴッホの本当のすごさを知った日」というblogもわかりやすいです。(昔、シュミレーターについて調べてた時に一番最初に読んだ記事だったりします)https://www.google.co.jp/amp/asada0.tumblr.com/post/11323024757/ゴッホの本当のすごさを知った日/amp
by moya
いえいえ、これ実は投稿した時点で、すでに半分くらい読み終えてるというトリック(笑)なんですよ。

リンク先拝見し、確かにゴッホがすごく繊細な色使いになっていて驚きました。最後の

【そしてこれは、ともすれば「正常色覚の人の方が(色を見て理解するという点では)色覚異常の人より優れている」と思いがちな私たちに、ある点では「色覚異常の人の方が正常色覚の人より優れている」ことを示す実例のひとつだと言うことができるかもしれない。人間はそれぞれで、ある点では誰かより優れていることもあれば、また別な点では他の人が優れていることもあるというごく自然なことだ。】

はまさに!だと思いました。

これは色覚の話ですが、感性、そして人生全般にも当てはまる話だと感じました。

ご紹介ありがとうございましたm(_ _)m
山田太郎さん、なるほど、超超速読術かと(笑)ゴッホの色遣い(としている絵)でみると、絵の魅力が更に増しますよね。こちらこそ、また色々教えて頂きたいです、よろしくお願いします。UC級読んでみます!いつもありがとうございます。 moya
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。