このプラグインの元はEightShapes社が数年前につくったContrast Gridです。背景色と前景色を入力すると、それらの組み合わせとそのコントラスト比をグリッドで表示してくれるツールです。 WCAGの達成基準1.4.3にある4.5:1というコントラスト比を保てる色の組み合わせを探すのに使えるひとつの方法とツールではあるんですが、Figmaでの作業で効率的に使いたかったので、今回プラグイン化してみました。 プラグイン化といっても、アウトプットの形をEightShapes社のものにしただけで、内部の実装は試行錯誤してゼロから書き直しています。 EightShapes社のContrast Gridの問題EightShapes社のContrast GridではAlphaの値に対応してないのが問題でした。自分が関わっているデザインシステムで定義しているカラーでは、テキスト色などに使う無彩色
![色のコントラスト比をグリッド表示で一覧化できるFigmaプラグイン「Contrast Grid」をつくりました|Hiroki Tani](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a71a9ac2cf34817636ea198cbe9410b82d8cde2/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F57413260%2Frectangle_large_type_2_0b869a106ab38aaa2329ab897772e660.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)