【AdobeXD プラグイン】文字の読みやすさを数値化してチェックできるプラグイン
Adobe XDにインストールしておくことで、快適に作業を進められる、Web制作に役立つプラグインをご紹介いたします。
01.色の視認性を数値でチェックできる「Stark」
「Stark」は、背景色とテキスト色のコントラスト比をチェックできる機能と、色覚異常の方が見た際の色合いのシミュレーション機能を持つプラグインです。今回は、コントラスト比のチェック機能に焦点をあてて、ご紹介いたします。
※「Stark」のコントラスト比のチェックは「Web Content Accessibility Guidelines (WCAG) 2.0」が定めるコントラストの達成基準に沿っているかを判定しています。
02.プラグインのインストール方法
- Adobe XDを起動後、メニューから「プラグイン＞プラグイン参照」を選択。
- ダイアログでプラグインリストが表示されますので、「Stark」を検索し「インストール」をクリックします。
03.「Stark」の使い方
コントラスト比をチェックしたいオブジェクトを選択した状態で、プラグイン一覧から「Stark」をクリック。表示された項目の中から、「Check Contrast」をクリックすると、コントラスト比の結果が表示されたウインドウが出ます。（選択したオブジェクトが１つだった場合はアートボードとのコントラスト比が表示されます。）
■ショートカットキー
【Windows】Shift+Ctrl+7
コントラストのレベルについて
コントラスト比は最大値を21：1、最小値を1：1と表現していて、ウインドウに表示されている「AA」や「AAA」などの表示はコントラストのレベルを表しています。
- AA：コントラスト比が4.5：1で「最低限必要なコントラスト」の意味
- AAA：はコントラスト比が7.0:1以上で「より十分なコントラスト」の意味
テキストの判定基準について
また、テキストはサイズやウェイトでも判定基準が変わり、以下の基準が設けられております。
- NORMAL TEXT：フォントサイズが16px以上で通常の太さ以上
- LARGE TEXT：フォントサイズが18.66px以上の太字、またはサイズが24px以上
視認性が悪い配色例
ちなみに、視認性が悪い配色だとこのような上記のような表示になります。
全ての項目に×がついています。「NORMAL TEXTでもLARGE TEXTでも基準を満たしていない」という結果になりました。