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

Post on:2019年3月22日

sponsors

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

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

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

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

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

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

ベースのカラーを設定

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

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

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

レベルAAAのグレー

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