top of page
検索

ウェブアクセシビリティのガイドラインを満たすコントラスト比とは？

WCAG（Webコンテンツアクセシビリティガイドライン）とは？

WCAGとは、Web Content Accessibility Guidelinesのことです。ウェブコンテンツをよりアクセシブルにするため、広範囲に及ぶ推奨事項を示しているガイドラインのことを指しています。


Webテクノロジーの標準化等を推進している団体であるW3Cが提唱しているため、国際的に普及しているガイドラインと言えます。

このガイドラインに従うと、世界的にあらゆる人が利用しやすいWebページになると言えるでしょう。


技術トレンドは移り変わりが速いものの、W3Cが定めるガイドラインは、どんな技術にも適用できるように配慮されていることが特徴です。


コントラスト比はどのように定められている？

「コントラスト比」の意味

コントラスト比とは、液晶画面の最も明るい部分と最も暗い部分の明るさの比率のことを言っています。


4.5:1 のコントラスト比が必要

テキストには、少なくとも 4.5:1 のコントラスト比が必要と指標として示されています。

これは、コンテンツをアクセシブルにすることができる、科学的に証明された数値だそうです。


もし、背景が無地の色であった場合、各テキストの文字と背景のコントラスト比は、 4.5:1 で保持することが重要で、そうすることで、相対輝度が維持されるためにより見やすくなるのです。


例外もある

もちろん、ウェブサイト内の全てのコンテンツを4.5:1 のコントラスト比が必要と言っているわけではありません。


中には例外もあります。


・大きなテキスト ・付随的なテキスト ・ロゴ


例えば、タイトルなどの大きなテキストは、コントラスト比が多少粗くても問題ありません。 3:1 程度のコントラスト比でもよいとされています。


装飾としてのテキストなど、意味を強く持たない場合には、例外もありとされています。

例えば、補足のテキストが薄いグレーで書かれている例などもあるでしょう。


それは、重要な意味を持たない付随的なテキストであるため、コントラスト比をゆるく設定しているのです。


他にも、クリエイティブな要素であるロゴなどは、コントラスト比を粗くしても構いません。このため、グラデーションなどのロゴも大丈夫です。


コントラスト比のチェッカーがある？


コントラスト比の計算ツールは、さまざまなものが公開されています。


Abode Color


有名なのは、『Abode Color』というデザインソフト会社が出しているツールです。

合格・不合格で判定が出るため、わかりやすいツールとなっています。

さらに、類似色でコントラスト比をクリアした色の提案をしてくれます。


代替色を簡単に見つけられるため、非常に便利だと言えるでしょう。多くのデザイナーに推奨されやすいツールです。

また、Illustrator／Photoshopの校正設定機能などを使ってみるのもよいかもしれません。


WCAG Color contrast checker


Googleの拡張機能でもチェックすることができます。


WCAG の規格を満たしたテストをしてくれます。使い方は、非常に簡単です。まず、コントラスト比をチェックしたいページを開きます。

そして、その拡張機能のアイコンをクリックすると、画面の左部に検証結果が表示されます。

検証結果が出るまでのスピードも速いので、他社のサイトのコントラスト比をチェックしたいときなどにおすすめです。


スマホアプリなどもおすすめ


PC以外でもスマホアプリでも、色のシミュレーションをしてくれるアプリがあります。


まだウェブサイト自体が構想段階だという場合には、このようなアプリで初期のカラー設計をするのも良いでしょう。


カラーユニバーサルデザインは大事

色が見えづらい人は、国内だけでも数百万人の規模でいると言われています。インバウンドの需要が高まり、より多様であらゆる人にウェブサイトを閲覧してもらう必要がある今、カラーユニバーサルは非常に重要な考え方です。


コントラスト比が足りていないがゆえに、正しく情報が受け取れないことが出てきてはよくありません。


色が見えづらいような方々にもきちんと情報が届くコントラスト比のデザインに仕上げることが、社会的に求められており、カラーユニバーサルデザインであると言えるでしょう。


まとめ

もし自社のウェブサイトが指標となるコントラスト比を満たしていない場合、今すぐに修正をしたほうが良いと言えるでしょう。


しかし、色を修正する作業は簡単ではありません。

そこで、ウェブアクセシビリティAIを活用すると、簡単なアドオンで、コントラスト比が遵守されたウェブサイトに切り替えることができます。


色が見えづらい人には、コントラスト比が保たれているウェブサイトを提供できるため、非常に良い手助けとなるでしょう。

簡単に導入可能なため、ぜひ試してみてください。


 
 
bottom of page