人によって程度は異なりますが、世界で5%程度の男性が何らかの色覚障害を持っていると言われています(女性は0.2%)。そうした点を無視して作成したHTMLメールは、読み手にとって読みづらく、強いストレスを感じさせるものになってしまうでしょう。
今回は主に色覚障害をメインに、事前にチェックできるソフトウェアやサービスを紹介します。これらのサービスを使い、誰でも読みやすい、アクセシビリティの高いメールを実現してください。
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
背景色と文字色を指定して、アクセシビリティの基準におけるA〜AAAの評価を出します。文字サイズごとに出るので、見やすい配色や文字サイズが分かるでしょう。
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
WebAIM: Contrast Checker
背景色と文字色を指定して、コントラスト値を算出します。通常テキスト、大きなテキスト、そしてグラフィカルオブジェクトとUIコンポーネントにおけるWCAG基準を出力します。
Randoma11y
ランダムなテキスト色、背景色におけるコントラスト値を算出します。基本的にAA以上の高いレベルのものが出るようです。
Funkify – A disability simulator for the web
視覚障害におけるWebサイトの見え方をテストできるGoogle Chrome機能拡張です。基本的に月額サブスクリプション型のサービスとなっているようです。
Funkify – A disability simulator for the web
Contrast — Color Accessibility on the Mac App Store
macOS用のソフトウェアになります。フローティングで表示して、いつでもカラーアクセシビリティをチェックできます。
Contrast — Color Accessibility on the Mac App Store
Color Oracle | Color Oracle
Windows/macOS/Linux向けに提供される色覚障がいをテストするソフトウェアです。どのように見えるかをリアルタイムにシミュレートし、フルスクリーンで見え方を確認できます。
Accessible Colors | WCAG 2.0 AA and AAA color contrast checker
テキストサイズ、背景色、テキストカラーを指定します。また、WCAG AAまたはAAAを指定して、基準に合わせたコントラストカラーも生成できます。
Accessible Colors | WCAG 2.0 AA and AAA color contrast checker
Accessible Brand Colors by Use All Five
複数の色を追加して、それがWCAGに沿っているかどうかをマトリックスで確認できます。ブランドで使われているカラーパレットを追加すると分かりやすいようです。
Accessible Brand Colors by Use All Five
Leonardo
キーになる色を決めて、そのコントラストを指定して色を生成します。基準になるカラーが決まっている時に便利でしょう。
axe Accessibility Linter - Visual Studio Marketplace
React、Vue、HTMLおよびMarkdownファイルに対してアクセシビリティチェックを行うVisual Studio機能拡張です。カラーリングや画像タグのaltなど、アクセシビリティ向上に必要なチェックを行えます。
axe Accessibility Linter - Visual Studio Marketplace
まとめ
WCAGはWebページのアクセシビリティに関するガイドラインになります。HTMLメールの場合も、Webページと同じように考える必要があるでしょう。
アクセシビリティ自体はカラーリング以外にもaltや文字サイズなども含まれます。誰にとっても読みやすいHTMLメールを作るためにも、注意しておきたいポイントになります。