ちょうど昨夜、Ionicドキュメンテーションで興味深いプルリクエストがマージされました。
Ionic Color Generatorは、指定色からコントラスト色(※ コントラストの強さにあわせて、 #000000
か #FFFFFF
)、ちょっと濃いshade色、ちょっと薄いtint色を生成してくれるサービスです。Ionicを使ってる人は一度はお世話になってるサービスではないでしょうか。
なのですが、以前まで提供してたColor Generatorのコントラスト色は、コントラスト比(Contrast Ratio)が 3.68:1
となっており、WCAG(Web Content Accessibillity Guidelines)が推奨するコントラスト比に満たなかったとのことです。
みてみると、Large TextはAAですが、Normal TextではFailとなっています。
そこで、このプルリクエストでは、コントラスト色の計算式を修正し、WCAGに準拠するコントラスト色をだすようになりました。
どう変わるか
とりあえず、Color Generatorの現行の配色では以下のようになります。上記を比較すると、コントラストがより強くなったことがわかりますね。
ただ、コントラスト比率を重視しての先行変更のため、デザイン性という意味では一段回落ちたなというのが感想です。Ionic teamもそれは自覚してるようで、このプルリクエストで以下のように述べています。
I suppose we'll be changing the colors soon anyway.
すぐに(スターターの)基調色自体を変更することになるでしょう。
私たちはどうすべきか
これを踏まえて私達がどうすべきかですが、おそらく多くのユーザはアプリ独自の基調色を決め、Color Generatorで配色セットを生成してきたと思います。ですので、スターターの配色セットが変更されることはプロダクトにあまり影響はないと思いますが、今まで生成してきた配色は十分にコントラスト比を満たしてるか、再生成をお試しすることをおすすめします。
アプリをつくってる以前に、私たちはWebのコードを書いてるので、WCAGは大切にしていきたいですよね。
ちなみに、コンストラストが十分にあるかのチェックは以下のツールからできるのでご利用ください。
それではまた。