【AdobeXD プラグイン】文字の読みやすさを数値化してチェックできるプラグイン
Adobe XDにインストールしておくことで、快適に作業を進められる、Web制作に役立つプラグインをご紹介いたします。
・・・
01.色の視認性を数値でチェックできる「Stark」
「Stark」は、背景色とテキスト色のコントラスト比をチェックできる機能と、色覚異常の方が見た際の色合いのシミュレーション機能を持つプラグインです。今回は、コントラスト比のチェック機能に焦点をあてて、ご紹介いたします。
02.プラグインのインストール方法
①Adobe XDを起動後、メニューから「プラグイン>プラグイン参照」を選択。
②ダイアログでプラグインリストが表示されますので、「Stark」を検索し「インストール」をクリックします。
03.「Stark」の使い方
コントラスト比をチェックしたいオブジェクトを選択した状態で、プラグイン一覧から「Stark」をクリック。表示された項目の中から、
「Check Contrast」をクリックすると、コントラスト比の結果が表示されたウインドウが出ます。(選択したオブジェクトが1つだった場合はアートボードとのコントラスト比が表示されます。)
コントラスト比は最大値を21:1、最小値を1:1と表現していて、ウインドウに表示されている「AA」や「AAA」などの表示はコントラストのレベルを表しています。
また、テキストはサイズやウェイトでも判定基準が変わり、以下の基準が設けられております。
ちなみに、視認性が悪い配色だとこのような下記のような表示になります。
全ての項目に×がついています。「NORMAL TEXTでもLARGE TEXTでも基準を満たしていない」という結果になりました。
▼前回の記事はこちら
▼エムハンドを知る