Q&A:Geri Coadyが色とアクセシビリティについて語る

ウェビナー「色は相対的なもの: アクセシビリティを考慮してデザイン」で、ウェブデザイナーでありイラストレーターのGeri Coadyが、色覚異常の有病率と、デザインの決定事項が色覚異常を持つ人々のユーザビリティに及ぼす問題について指摘し、光を投じてくれました。プレゼンテーションの後、何から着手すればよいか、アクセシビリティのあるパレットの作成、ブランドガイドラインの方向性などについての質問に答えました。以下がその概要です。

ハイパーリンクやリンク可能なテキストが、テキストに十分なコントラストがないと消えてしまうことがあるとおっしゃいましたが、テキスト内のハイパーリンクすべてに下線をつけるべきだと言うことですか。

いいえ、そうではありません。段落内のリンクと残りのテキスト部分のコントラストによります。コントラストチェッカーやColor Oracleのようなカラーアクセシビリティツールでデザインを試してみて、リンクの色が他のテキストの色と違っていれば、下線をつける必要はありません。他にも理由はありますが、そのようなテスターやシミュレーターを使用するのが重要なのはそのためです。プレゼンテーションで赤いリンクについて触れましたが、リンクの赤色と周りのテキストは近い色合いでした。テキストの色は黒ではなく、ミディアムからダークグレーでした。ですから、下線がないとリンクを識別するのが不可能だったので、下線を入れ直したのです。

デザイン作業をする時は最初にグレースケールで考え、色はアイスクリームのフレーバーのように、その次に考えるべきですか。

私の説明がわかりにくかったようですね、ごめんなさい。私はまったくそのように考えていません。

グレースケールでレイアウトをデザインすると、どの色をどこに配置するかにとらわれなくても、優れたコントラストを実現することができます。ハイファイのワイヤフレームをデザインするようなものです。でも、グレースケールで考えてはいけません。それでは確実につまらないパレットになってしまいます。これはどうしても避けてほしいところです。

パレットのアイディアは、デザインプロセスの初期段階でまとめてください。しっかりとしたオプションができたら、ページのデザインに移り、グレースケールでデザインすることを考慮し、色に気を取られることなく、優れたコントラストとデザイン階層を作ることに集中します。満足するデザインができたら、思い切りカラーを取り入れます。これでいいと納得のいくまで、パレットのアイデアを活用し、グレースケールのデザインに入れていきます。この方が、最初から色を使ってデザインするより速く進みます。意味もなく思い付きで色を試すことに時間をかけないからです。何時間もやみくもにPhotoshop/Sketchなどでありとあらゆる色の組み合わせを試し、ページのレイアウトでは何の進展もないという状況に陥ることがよくあります。

私は、Skillshareクラスで色のワークフローについて説明したことがありますから、そこで使ったこのテクニックを参考にしてみてください。テクニックを最初から最後までデモンストレーションしているので、そちらの方がわかりやすいと思います。第1部はColor on the Web I–Designing Cohesive Palettes(ウェブ上での色I-まとまりのあるパレットをデザイン)、第2部は)、第2部はColor on the Web II–Design for Clarity and Compliance((ウェブ上での色II-明確性とコンプライアンスを考慮してデザイン)です。

アクセシビリティの観点では、赤色は選択肢としてよくないのですか。

いいえ、そんなことはありません。使い方次第です。黒字の段落に赤色のリンクを使用すると、色覚異常の人にとって識別がつかないので問題になります。でも、非アクティブのホバーで下線を追加すれば、その問題は簡単に解決します。線種や線の太さが違えば、折れ線グラフで赤色と緑色も使用できます。常識の範囲内で、適切な手段を取れば大丈夫です。

色やコントラストを変えると、会社のブランドアイデンティティーに影響するため、切り替えシステムの導入には困難を伴います。どのように対処していらっしゃいますか。

大変良い質問ですね。私自身もそのような問題に直面した経験があります。その場合は、ブランドアイデンティティーをデザインした人と話し合うのがベストです。あなたが目にしていることを見せ、どうしてそれがとても重要なのかを説明します。Veerle Pietersのブログのように、ウェブサイトに黒と白の配色を導入するよう提案してみましょう。彼女のブログでは、視覚障害者のユーザーが切り替えられるよう高コントラスト版を提供しています。

リンクのコントラストが問題ならば、下線をつけるだけで良いのです。カラーの背景の上のテキストが問題であれば、写真の上にテキストを配置したらどうでしょうか。できる限りの努力をしなければなりません。努力をしているのであれば、あきらめて何もしないよりましです。

ユーザーテストはプロセス全体にわたって行うのですか、それとも最後だけですか。

Simply Accessibleのウェブサイトでは、最後の方でユーザーテストをしました。アクセシビリティ専門家のチームと共同で作業をしていたので、プロセスの途中の段階で回避すべきことがほとんどわかっていたからです。でも、必ずユーザーテストを行ってください。例えば、お客様にカラーパレットのプレゼンをする時に、そのカラーパレットが色覚異常のユーザーのアクセシビリティがあることを確認したいのであれば、実際に色覚異常の人を同伴するとよいでしょう。いろいろな人に尋ねましょう。ツイッターでメッセージを配信してみましょう。驚くほど多くの人があなたの作品を見てフィードバックを返してくれるでしょう。でもやはり、テストで確認することが重要です。プロセス全体にわたってテストを実施してください。

見た目にも美しく、かつアクセシビリティのあるパレットを作成するためのアドバイスをいただけませんか。

コツを心得ていて、自分の作品のチェックの仕方をわかっているなら、選択できる色が限定されていると感じることはないと思います。自由に色を選択しましょう。コンセプトを思いついたら、すぐに試してください。Color Oracleでうまく行けば、それでいいのです。気に入らなければ改善します。色のアクセシビリティだけを考えていると、非常に限定されたパレットになってしまいます。ですから、アクセシビリティに気を配りながらも、それに縛られないようにしましょう。

写真の上にあるテキストのコントラストをテストする方法はありますか。

それは、また別のタイプの問題になります。写真の上にテキストがある場合、コントラストチェッカーは写真を分析し、その上にあるテキストとのコントラスト比を比較することはできません。ですから、次のような手段を試してください。コントラストが低いと思ったら、その周りの色を一部サンプルしてみます。全体に暗色の写真であれば、Photoshopで色をサンプルし、それを抽出してその上にテキストを載せてLea VerouJonathan Snookのツールでテストしてみます。もう一つは、画像の後に

を使用する方法です。その
には、コントラスト準拠の色を選択します。読み手側で画像をオフにすることができます。ですから、画像の背後にある
色の上でテキストの色が表示されることになります。画像をオフにしていないのに、何らかの理由でブラウザ上に画像が読み込まれなかった場合と同じ現象が起こります。

ColorADDのようなコードを使用するホームページやデジタルUIの実用例は、どこで入手できますか。

ColorADDについてはよく知っていますが、残念ながらホームページで使われているのを見たことはありません。詳細に興味がある方のために簡単に説明すると、ColorADDというのは図形や記号を使って色を表現する技法です。こちらにキーがあり、そのサイトにコードの使用例がいくつか掲載されています。使用例は主に、交通、ルート案内、洋服など物理的なもので、デジタルスペースのものはほとんどありません。ColorADDがウェブページで使用されている例をご存知の方がいらっしゃいましたら、お知らせください。ぜひ見てみたいです。

ウェビナー「色は相対的なもの:アクセシビリティを考慮してデザイン」をご覧ください。

Facebook icon Instagram icon LinkedIn icon Twitter icon