「あたりまえ」をアップデートしつづける

お問い合わせ

Webサイトデザインにおけるカラーアクセシビリティの重要性を考察する

  • 投稿日 :
  • 最終更新日 :

読了目安 : 5分

君塚 伴子
デザイナー(ビジネス・アーキテクツ)

ゲーム業界でのデザイナーを経て、2000年にウェブ制作会社に入社。運用から構築まで得意分野は幅広く、多くの大規模プロジェクトに関わる。インタラクティブコンテンツのアートディレクター。2018年よりビジネス・アーキテクツに入社し、UI/UXデザイナーとして奮闘中。

プロフィールアイコン(写真):デザイナー 君塚

はじめまして、BAsixs参画企業、ビジネス・アーキテクツ(以下、BAと称する)のデザイナーの君塚です。

本記事では色から受ける印象の話ではなく、ユーザビリティやアクセシビリティといった、どんなタイプのユーザーでも情報にアクセスしやすく、理解できるWebサイトデザインにおけるカラー配色の解説になります。

Webサイトデザインにおけるカラーアクセシビリティの重要性を考察する

Webサイトデザインにおける「カラー」の役割

Webサイトデザインに関わらず、日常生活でも色によって情報を受け取っています。

例えば信号では危険な色に赤、注意に黄色と色によって情報を伝える事も多いですよね。注意喚起のデザインに赤が使われるのは、直感的に注目を促す効果を利用しています。

つまりカラーはコミュニケーションの強力な手段であるとともに、アクセシビリティを向上する強力なツールとなります。

アクセシビリティとは「多くの人に情報を伝える」という本質を持つ

アクセシビリティとは、異なるタイプのユーザーそれぞれが抱える制約に影響されることなく、公平に情報にアクセスし、読み取ることができるということです。

例えば年齢による色覚機能の低下を起こしている方が、医療機関のWEBサイトを閲覧した時に、カラーのコントラスト比が低いと重要な情報に辿り着けなかったり、伝わりにくくなる可能性があります。

アクセシビリティは、基本的なカラーのコントラストを確保することで、より多くの人に情報を伝えやすくする利点があります。

アクセシビリティガイドラインについて

Webコンテンツアクセシビリティガイドラインは、World Wide Web Consortium(W3C)が策定したWebコンテンツをよりアクセシブルにするためのガイドラインと推奨事項です。

サイトやアプリケーションを含む、Webアクセシビリティに関する国際的な基準となっています。

参考

アクセシビリティを高めるカラーデザインはどういうものか?

アクセシビリティを考えると、背景の手前に置かれた文字を誰にでも読めるようにするために、両者のカラーのコントラストを高くする必要があります。

これには、画像やアイコン、ボタンなどの手前に表示される文字のほか、図や地図に含まれるグラフィック情報を伝えるためのカラーも含まれます。

コントラスト比とは、背景とテキストの明暗の比率

では、コントラスト比と見やすさはどういう関係なのでしょうか。

コントラスト比率の高低と見やすさの関係

  • 比率が高い=明るい部分は明るく暗い部分は暗くなり、明暗の差がはっきりする
  • 比率が低い=明るい部分と暗い部分の差が小さくなり、ぼやけたようになる

という様に背景とテキストの明暗の比率の事です。

コントラスト比が最も高いのは「21:1」で、一方が黒、他方が白の場合です。
背景がベタ塗りの場合、色を反転させてもコントラストの値は変わりません。

コントラスト比

カラーのコントラスト比をチェックするツールの紹介

W3Cが定めたWebアクセシビリティの基準(WCAG 2.1)では、コントラスト比を以下のように定めるよう規定されています。

1.4.3 コントラスト (最低限) (レベル AA)

  • テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。
  • ただし、次の場合は除く:大きな文字=サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。

1.4.6 コントラスト (高度) (レベル AAA)

  • テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。
  • ただし、次の場合は除く:大きな文字=サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 4.5:1 のコントラスト比がある。

上記のコントラスト比に適合しているかを検証するには、次の段落で紹介する3つのツールが便利です。

参考

コントラストチェックツール1.Colorable

Colorableでは、色相や高度のレバーを動かして、直感的に色を選ぶことができます。色の「当たり」を見られるので、コントラストを実感値で見るのに便利です。

Colorable

コントラストチェックツール2.WebAIM Color Contrast Checker

WebAIM Color Contrast Checkerでは、コントラスト比がクローズアップされていて分かりやすいサイトです。

WebAIM Color Contrast Checker

コントラストチェックツール3.Web Accessibility Guidelines v1.0

Web Accessibility Guidelines v1.0は、最初からカラーサンプルが用意されているので、色の組み合わせを選ぶだけですぐに使えます。

Web Accessibility Guidelines v1.0

まとめ:配色からこだわる。すべての人が使いやすいWebサイトを追求しています

Webサイトデザインには、アクセシビリティ対応が欠かせません。発信したい情報が誰にでも公平に読み取れないと意味がありませんよね。

特定の対象者のためだけではなく、万人に等しく使いやすいサイトを目指して「アクセシビリティ」を考慮したサイト制作を「色」からこだわって行っています。

BAsixsでは、アクセシビリティに配慮したWebサイトデザインのノウハウが豊富です。どのようなことでも御相談ください。

お気軽にご相談ください

サービスの詳しい情報や仕事のご依頼については、お気軽にご相談ください。

お問い合わせ

こちらの記事も合わせて読む

  • Google Search Consoleの「URL検査」とは?インデックス登録して、検索結果にページを表示させよう

    • 投稿日 :
    • 最終更新日 :
    • Google Search Console
    • SEO
    • コンテンツマーケティング

    もっと見る

  • モバイルフレンドリーとは?確認方法・対応策を理解して、モバイルWebサイトの検索順位を改善しよう!

    • 投稿日 :
    • 最終更新日 :
    • Google Search Console
    • SEO
    • レスポンシブウェブデザイン

    もっと見る

  • SEO対策で上位表示を狙うために、デザインで押さえたい4つの原則【これだけは】

    • 投稿日 :
    • 最終更新日 :
    • SEO
    • デザイナー・UI/UXデザイナー
    • マーケティング

    もっと見る

この記事をシェアする

FACEBOOK
Facebookシェア
Twitter
Twitterシェア
はてなブックマーク
はてなブックマークに追加