1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Ionic Framework / Capacitor / StencilAdvent Calendar 2023

Day 1

IonicドキュメンテーションのColor Generatorが、WCAG準拠になりました

Posted at

ちょうど昨夜、Ionicドキュメンテーションで興味深いプルリクエストがマージされました。

Ionic Color Generatorは、指定色からコントラスト色(※ コントラストの強さにあわせて、 #000000#FFFFFF )、ちょっと濃いshade色、ちょっと薄いtint色を生成してくれるサービスです。Ionicを使ってる人は一度はお世話になってるサービスではないでしょうか。

スクリーンショット 2023-12-01 午前11.36.35.png

なのですが、以前まで提供してたColor Generatorのコントラスト色は、コントラスト比(Contrast Ratio)が 3.68:1 となっており、WCAG(Web Content Accessibillity Guidelines)が推奨するコントラスト比に満たなかったとのことです。

スクリーンショット 2023-12-01 午前11.43.05.png

みてみると、Large TextはAAですが、Normal TextではFailとなっています。

そこで、このプルリクエストでは、コントラスト色の計算式を修正し、WCAGに準拠するコントラスト色をだすようになりました。

どう変わるか

とりあえず、Color Generatorの現行の配色では以下のようになります。上記を比較すると、コントラストがより強くなったことがわかりますね。

スクリーンショット 2023-12-01 午前11.33.16.png

ただ、コントラスト比率を重視しての先行変更のため、デザイン性という意味では一段回落ちたなというのが感想です。Ionic teamもそれは自覚してるようで、このプルリクエストで以下のように述べています。

I suppose we'll be changing the colors soon anyway.
すぐに(スターターの)基調色自体を変更することになるでしょう。

私たちはどうすべきか

これを踏まえて私達がどうすべきかですが、おそらく多くのユーザはアプリ独自の基調色を決め、Color Generatorで配色セットを生成してきたと思います。ですので、スターターの配色セットが変更されることはプロダクトにあまり影響はないと思いますが、今まで生成してきた配色は十分にコントラスト比を満たしてるか、再生成をお試しすることをおすすめします。

アプリをつくってる以前に、私たちはWebのコードを書いてるので、WCAGは大切にしていきたいですよね。

ちなみに、コンストラストが十分にあるかのチェックは以下のツールからできるのでご利用ください。

それではまた。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?