アルファサード株式会社 代表取締役 野田 純生のブログ


米大統領選挙の速報サイトに見る「色で表現したらわかりやすくね?」問題。


公開日 : 2016-12-23 07:00:00


米大統領選挙の速報。色分けで両陣営の優勢状況を表現している。

米大統領選挙、僅差で最後まで読めませんでしたね。普段政治のこと書いたりしないですけど(政治と野球の話はオンラインでしない主義)、今日は Web Accessibility Advent Calendar 2016 の23日目の記事です。

Accessibility Advent Calendar といえば、sukoyakarizumuさんによるこんな記事がありました。

私は ColorTester の作成者なので、本題の前に少しだけ ColoerTester について触れさせていただきます。特にこのページで結果のバラツキについてネガティブな書き方をされているわけではないのですが、ColorTesterの色の比較メソッドは W3Cのページにある計算式のそのまま、ほぼコピペです。

Xojoという開発ツールで作成しています

Function GetL (C As Color) As Double
  Dim R,G,B As Double
  R = C.Red / 255
  G = C.Green / 255
  B = C.Blue / 255
  If R <= 0.03928 Then
    R = R / 12.92
  Else
    R = ( ( R + 0.055 ) / 1.055 ) ^ 2.4
  End If
  If G <= 0.03928 Then
    G = G / 12.92
  Else
    G = ( ( G + 0.055 ) / 1.055 ) ^ 2.4
  End If
  If B <= 0.03928 Then
    B = B / 12.92
  Else
    B = ( ( B + 0.055 ) / 1.055 ) ^ 2.4
  End If
  Dim L As Double
  L = 0.2126 * R + 0.7152 * G + 0.0722 * B
  Return L
End Function

なので、テキストフィールドに値を入れて計算している以上は正しい結果を返していると思っているのですが、ピッカーから色を拾う場合に正確な値が拾えす、誤差がでることがあります(これはmacとWindowsでも少々異なるかもしれません)。(久しぶりにコードを見て確認したのですが)、ColorTesterのピッカーは、マウスポインタ周辺の小さなキャプチャを生成して、そこから色を拾っています。実はあまり知られていない(ように思う)のですが、ColorTesterでは「OS標準のカラーピッカーを使う」という設定が選択できます。スポイトアイコンをクリックする「ひと手間」が余分にかかるのですが、より正確に色を拾いたい場合、こちらの設定も試してみてください。

ColorTesteの設定で「OS標準のカラーピッカーを使う」を選択した場合

また、画像をドラッグ&ドロップで放り込む簡易チェック機能もあります。このロジックについてご興味のある方は下記の記事で紹介しています。

米大統領選挙の速報サイトに見る「色で表現したらわかりやすくね? 」問題。

さて、ようやく本題に戻ります。米大統領選挙、まだ記憶に新しく、次期大統領の発言もニュースを賑わしていますね。

この記事では、米大統領選挙の速報サイトのデザインにおける色問題について取り上げます。 米大統領選挙の速報サイトについては、以下のページに様々なデザインが紹介されていますが、冒頭で紹介した画像もその一つです。

上記のページでも触れられている通り、色分け、色の濃淡もしくは大きさなどでどちらが優勢かが視覚的直感的に理解しやすいと紹介されています。

色分けされた地図は視覚的でわかりやすいので、ついやってしまいがちなパターンですが、次に示すようにグレースケール状態にすると民主、共和党優勢、同数あたりの区別が困難になってしまいます。

考えておかなければならないのは、色弱(色覚異常とも表現されます)の人や弱視の人のことだけではありません。いまどきモノクロ?、みたいな意見は kindle が一蹴してくれましたし、例えばこの速報を見ながら会議を行っている時、モノクロ印刷した紙資料で配布されても何がなんだかわからないですよね?

同じ米大統領選挙の速報をグレースケール表示にしてみた。

このような画像は、JIS X8341-3の7.1.4.1(WCAG 2.0 の1.4.1) に適合していないことになります(適合レベルは「A」)。上部の更新時間や「当選 優勢」などの画像内の文字のコントラスト比が不足しているという別の問題もあります。

これを適合させるためには、以下のような方法があります。文字を併用する、パターンを変えるなど。

このような配慮がなされない理由として、全体的に「デザインが"うるさく"」なってしまう点が挙げられます。以下の例は、色に加えてアルファベット1文字を追加し、若干全体のコントラストを上げています(文字の大きさも当選か優勢で分けています)。

色に加えて文字を追加した大統領選挙速報地図

モノクロになっても理解できますね?

色に加えて文字を追加した大統領選挙速報地図(モノクロ版)

この「デザインが"うるさく"」なってしまう問題を回避するには、例えば文字併記版と文字のない版を切り替えられるようにする、表組みでマークアップしたテーブルを地図の下に表記する、などの方法があると思います。いずれにしても画像の alt属性に各州の結果をずらずらベタ書きで格納するのは現実的ではありませんから、マークアップしたテーブルを併記するのが良いと思います。国内で次の選挙の際にでも、このあたりに配慮された表現が見られると嬉しいですね。

この手の問題につながりがちなものを覚えておこう

このような表現になりがちなもののパターンを覚えてしまいましょう。何事も「ツボ」が大事です。非アクセシブルなものになりがちなものには以下のようなものがあります。

  • 施設・図書館などの開館カレンダー
  • グラフ
  • 地図・路線図

こいつらが出てきたら、「来やがったな!」 と思って確認する習慣を持ちましょう。

関連するかもしれない記事



このブログを書いている人
野田純生の写真
野田 純生 (のだ すみお)

大阪府出身。ウェブアクセシビリティエバンジェリスト。 アルファサード株式会社の創業者であり、現役のプログラマ。経営理念は「テクノロジーによって顧客とパートナーに寄り添い、ウェブを良くする」。 プロフィール詳細へ