Webサイト・スマホアプリの制作者がカラーとアクセシビリティについて知っておくべきこと

アクセシビリティ、カラーのコントラストは日増しに重要性が高まっています。
Webサイトやスマホアプリなどデジタルメディアのデザインで、コントラストが適切なカラーを簡単に見つけることができるオンラインツールを紹介します。

コントラストが確保されたぎりぎりのグレーなど、自分の使用したい色味で最適なコントラストを見つけることができます。

サイトのキャプチャ

Color.review

Webサイトやスマホアプリなど、デジタルメディアのおけるカラーコントラストの指針はWCAG規格にまとめられており、現在の最新は2.1です。
2.1には、AAとより厳格なAAAの2つのレベルがあります。

AA
テキストに必要なコントラストは4.5。見出しと大きなテキストの場合、最小値は3です。
AAA
テキストに必要なコントラストは7。見出しと大きなテキストの場合、最小値は4.5です。

※大きなテキストとは14pt(18.66px)以上の太字、または18pt(24px)以上。
参考: large scale (text)、CJK(中国語・日本語・韓国語)と同等

Color.reviewの使い方は、簡単です。
前景と背景のカラーで、最適なコントラストのカラーを見つけることができます。

サイトのキャプチャ

Color.review

右パネルの前景、または背景をクリックし、ベースのカラーを設定します。あとは、スライダーでAAA, AAに収まるように調整するだけです。

サイトのキャプチャ

ベースのカラーを設定

レベルは、上部に表示されます。

サイトのキャプチャ

コントラストが十分なら AA, AAA
コントラストが足りてないなら、FAIL

背景をFFFFFFにし、グレーでAAAを見てました。#595959がコントラスト7になります。

サイトのキャプチャ

レベルAAAのグレー

Color.reviewはアプリとしてもリリースされるようです。
OS X, Win, iPhone, Android版となっています。

サイトのキャプチャ

Color.review

sponsors

top of page

©2019 coliss