👀

Contrast Checkerでアクセシビリティをあげよう

2024/03/30に公開

はじめに

ボタンやテキストなど、背景との配色を考えないとボヤけて見えたりすることありますよね。
かくいう僕も自分自身ブログのタイトルに対してずっとその様なモヤモヤした気持ちがありました。
👇 hoshiの箇所が見づらい...

そんな時に便利なのがYamada Colorsです！

Yamada ColorsにはContrast Checkerという、テキストやボタンの配色のコントラスト比をチェックしてくれる機能があリます。

👆の画像では2つの配色のパターンをチェックしていますがここでは左側のケースで詳しく見ていきましょう。

点線で囲った❶Large Text / ❷Small Text / ❸UI Component
において、コントラスト比が基準を超えてるかどうかチェックをしています。

今回は
❶Large Text ✅Pass
❷Small Text ❌Fail
❸UI Component ✅Pass

と❷のSmall Textのみ良くない評価となりました。
確かに「この配色でこの文字サイズだと見づらいな〜」といった印象です。

またコントラスト比に関しては数値で表示され、この配色パターンでは3.1となりました。
このコントラスト比はAAレベルでは、4.5以上を満たす必要があると言われております。

それでははじめにで触れた様に自分のブログのタイトル部分の配色の改善をしていきたいと思います。

現状: 1.6...これは酷すぎますね

これをコントラスト比4.5クリアするまで調整すると

背景がグレーだとやはり厳しいのでそこは妥協しましたがなんとか基準の4.5をクリアできました。

ブログのタイトルはこのように変更しました。

うん！見やすい！

これからもこのコントラスト比を意識し、よりアクセシビリティの良いプロダクト作っていきたいと思います！