HTMLメールのアクセシビリティ向上に使いたい。カラーチェックツールまとめ。

人によって程度は異なりますが、世界で5%程度の男性が何らかの色覚障害を持っていると言われています（女性は0.2%）。そうした点を無視して作成したHTMLメールは、読み手にとって読みづらく、強いストレスを感じさせるものになってしまうでしょう。

今回は主に色覚障害をメインに、事前にチェックできるソフトウェアやサービスを紹介します。これらのサービスを使い、誰でも読みやすい、アクセシビリティの高いメールを実現してください。

f:id:moongift:20211018165651j:plain

背景色と文字色を指定して、アクセシビリティの基準におけるA〜AAAの評価を出します。文字サイズごとに出るので、見やすい配色や文字サイズが分かるでしょう。

f:id:moongift:20211018165702j:plain

背景色と文字色を指定して、コントラスト値を算出します。通常テキスト、大きなテキスト、そしてグラフィカルオブジェクトとUIコンポーネントにおけるWCAG基準を出力します。

f:id:moongift:20211018165710j:plain

ランダムなテキスト色、背景色におけるコントラスト値を算出します。基本的にAA以上の高いレベルのものが出るようです。

f:id:moongift:20211018165720j:plain

視覚障害におけるWebサイトの見え方をテストできるGoogle Chrome機能拡張です。基本的に月額サブスクリプション型のサービスとなっているようです。

f:id:moongift:20211018165744p:plain

macOS用のソフトウェアになります。フローティングで表示して、いつでもカラーアクセシビリティをチェックできます。

f:id:moongift:20211018165755j:plain

Windows/macOS/Linux向けに提供される色覚障がいをテストするソフトウェアです。どのように見えるかをリアルタイムにシミュレートし、フルスクリーンで見え方を確認できます。

f:id:moongift:20211018165805j:plain

テキストサイズ、背景色、テキストカラーを指定します。また、WCAG AAまたはAAAを指定して、基準に合わせたコントラストカラーも生成できます。

f:id:moongift:20211018165841j:plain

複数の色を追加して、それがWCAGに沿っているかどうかをマトリックスで確認できます。ブランドで使われているカラーパレットを追加すると分かりやすいようです。

f:id:moongift:20211018165852j:plain

キーになる色を決めて、そのコントラストを指定して色を生成します。基準になるカラーが決まっている時に便利でしょう。

f:id:moongift:20211018165900j:plain

React、Vue、HTMLおよびMarkdownファイルに対してアクセシビリティチェックを行うVisual Studio機能拡張です。カラーリングや画像タグのaltなど、アクセシビリティ向上に必要なチェックを行えます。

まとめ

WCAGはWebページのアクセシビリティに関するガイドラインになります。HTMLメールの場合も、Webページと同じように考える必要があるでしょう。

アクセシビリティ自体はカラーリング以外にもaltや文字サイズなども含まれます。誰にとっても読みやすいHTMLメールを作るためにも、注意しておきたいポイントになります。