色盲・色弱のシミュレーションやコントラストをチェックするSketchプラグイン「Stark」

更新日:2017年5月11日

昨日に引き続きプラグインの紹介です。今日紹介するのはコレ
Stark
The color-blind simulator and contrast checker for Sketch. Design with accessibility in mind.
(Sketch用カラーブラインドシミュレーター&コントラストチェッカー。アクセシビリティを考慮したデザイン)

まずはインストール

インストールはSketchpacksSketch Toolboxで行いましょう。Starkで検索してインストール。

カラーブラインドシミュレーター

Starkには8種類のカラーブラインドシミュレーターが用意されており、様々な症状の色盲・色弱の状態をシミュレーションすることができます。
まずは試しにこんなサンプルを用意してみました。

PluginsからStarkを選択し、Show Starkしてみます。こんなかんじ。

2番のカラーブライトネスを変更してみます。すると…

なるほど。こうやって見えるのか…。他にも試してみると

赤がグレーに見えたりするんですね。
試しに大人気のゲームパズドラをシミュレーターにかけてみると…



これではプレイできなそう…
ちなみにパズドラには色弱者向けオプションというのがあってこんな感じに見た目を変えることができます。

コントラストチェッカー

Starkのタブをコントラストに切り替えてみましょう。コントラストチェッカーは比較したいレイヤーを2つ選択して、Check Contrastボタンを押すと結果を表示してくれます。

薄いと怒られる

ディスプレーで見ているものが全てじゃないってこと

アクセシビリティの確認はディスプレーやスマホ上だけで確認できるものでもないのかも。どんな場面でもユーザーにデザインの意図が正しく伝わるように、ちょっと空いた時間があったら試しにStarkでチェックしてみてはどうでしょう?思わぬ発見があるかもしれません。

書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事