WordPress5.7のアクセシビリティが勉強になる

WordPressが5.7にバージョンアップしました。今回のバージョンアップで、WCAG 2.0 AAのカラーに対応したことが紹介されています。勉強のため、WordPressの配色を細かく見てみます。

配色間違い探し

配色が見直されたといっても微妙な変化で、もはや間違い探しです。

ただ、大きく色を変化させないからこそ、ユーザーの迷い(再学習)がなくなり、ユーザービリティ(使いやすさ)が保たれます。

アクセシビリティ(誰もが使えるか)については、真っ先に右下の配色変更が気になりました。

ピンクのボックスが、黄色のボックスに変わっています。

色覚に配慮したカラー

赤と緑が見えにくい男性は意外と多く、WordPress5.6までのピンク(薄い赤)は、感知しにくい人もいます。

試しにPhotoshopの機能で、赤・緑が見えにくいP型(1型)色覚のシミュレーションをしてみます。

WordPress5.7のほうが、気づきやすくなっています。

ただし、赤自体は一般的に気付きやすい色でもあるので、単純に無くすことはせず、ボックス左側にボーダーとして付けています。

誰もが気づけるよう、アクセシビリティとして考えられた配色だと感じます。

リンクの色はアクセシビリティというより・・・

リンクで使われている青も若干色が変わっています。WordPress5.7では、より青みが強くなっています。

背景(白)とのコントラスト比は、5.21→5.17とほぼ変わっていません。

元からWCAG2.0のAAをクリアしていたため、どちらかというと青みを強くすることで、リンクと認知されやすくしているのだと思います。

わずかな差ですがリンクの色は、Googleをはじめ多くのサイトで微調整が行われています。

彩度を最高まで上げない

前述のリンク色のカラーパレットを見ると、WordPress5.6でS(彩度)が100%だったのが、WordPress5.7で81%に落ちていることが分かります。

特にメニューをマウスオーバーした時の色は、Sが100%から50%に落ち着いています。

高彩度の色は見ていると疲れるので、彩度を抑えたほうが読みやすくなります。

個人的にはマウスオーバー時の色調整が、もっとも改善を感じます。

 

以上、WordPress5.7の配色を考察しながら、アクセシビリティなどの手法を学びました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)