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

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

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

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

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

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

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

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

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

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

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

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

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

参考

• Web Content Accessibility Guidelines (WCAG) 2.1.WAIC.(参照 2021-11-01)

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

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

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

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

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

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

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

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

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

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

参考

• Web Content Accessibility Guidelines (WCAG) 2.1.WAIC.(参照 2021-11-01)

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

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

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

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

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

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

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

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

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

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