トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

【XDプラグイン】コントラスト比と色覚異常の見え方をチェックする【Stark】

「作ったデザインをモノクロ表示にしたら、コントラストのある良いデザインかがわかる」という記事を見た。

CTAのバランスや色、位置が適切かどうかをテストするためのよい方法は、できあがったデザインを一旦グレースケールにしてみることです。その状態でもCTAがはっきりとみやすく、際立っているようなら、魅力的なUIにデザインされているということになります。

よりよいスキャナビリティのためのUIデザイン | UX MILK

 

XDにそういうプラグインがないか探したら、モノクロじゃないけど良さそうなプラグインがあったので使った。

webkikaku.co.jp

 

Stark

f:id:bibinbaleo:20200519112119p:plain

検索してプラグイン入れたらこんな感じ

f:id:bibinbaleo:20200519111856p:plain

色覚シミュレーション

Colorblind Simulationを選んで、アートボードを選ぶ

f:id:bibinbaleo:20200519112111p:plain

右のColorblind Typeを選ぶと変わる

f:id:bibinbaleo:20200519112116p:plain

モノクロはなかった。

 

コントラスト比較

テキストなどを選択した状態で、Check Contrastを選ぶと下みたいなウィンドウが出る

f:id:bibinbaleo:20200519111852p:plain

WCAG2.0(ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項)が定めるコントラストの基準に沿ってるかを診断してくれる。

WCAG 2.0 への適合を理解する | WCAG 2.0解説書

f:id:bibinbaleo:20200519111859p:plain

文字の大きさでもコントラストのOK基準は変わるんだね~

f:id:bibinbaleo:20200519111903p:plain

アートボードに設定している色としか比較してくれない。

選んだテキストの下にある長方形とかと比較してくれたらいいんだけどー

モノクロにするには・・・?

結局モノクロ表示してくれるプラグインはないのかな〜?

WebだとChrome拡張入れてる。

chrome.google.com

WIndowsの設定でもモノクロ表示にできるらしい!

pcrepair.w-pickup.com

設定>簡単操作>カラーフィルター オン

f:id:bibinbaleo:20200522115329p:plain

おおー!Slackのロゴの色が見える気がする・・・なんかすごい

f:id:bibinbaleo:20200522115454p:plain

グレースケール以外にも色覚補助フィルタがある

f:id:bibinbaleo:20200522115333p:plain

これで万事解決!