Back to Plugins
Color Contrast Grid

Color Contrast Grid

<p>Not sure if the color you are using meets the contrast ratio?</p><p>Try this plug-in.</p><p>It outputs the contrast ratios for all possible combinations of color styles.</p><p><br></p><h2>Main Functions</h2><ul><li>Generates a table of contrast ratios for all local color styles</li><li>Flexible as each part is componentized</li><li>Enables to limit the display according to the contrast.</li></ul><p><br></p><h2>Future updates</h2><ul><li>Allow output of exact contrast ratio values for colors with opacity less than 100%.</li><li>Allows you to add colors manually.</li></ul><p><br></p><p><strong>Bug reports and feedback welcome!</strong></p><p><br></p><p>自分の使っているカラーがコントラスト比を満たしているかわからない?</p><p>そんな時はこのプラグインを使ってみましょう。</p><p>カラースタイルの全通りの組み合わせのコントラスト比を出力します。</p><p><br></p><h2>主な機能</h2><ul><li>local color styleの全通りのコントラスト比の表を生成</li><li>各パーツがコンポーネント化されているので柔軟に対応ができます</li><li>コントラストに応じて表示を制限することが可能になります</li></ul><p><br></p><h2>将来的なアップデート</h2><ul><li>opacityがあるカラーのコントラスト比の正確な値を出力できるようにする</li><li>手入力でカラーを追加できるようにする</li></ul><p><br></p><p><strong>バグ報告・フィードバックお待ちしています!</strong></p>

contrastaccessibilitydesigncontrastcontrast ratiocolor contrast

Plugin Preview

Color Contrast Grid preview

About this plugin

Not sure if the color you are using meets the contrast ratio?

Try this plug-in.

It outputs the contrast ratios for all possible combinations of color styles.


Main Functions

  • Generates a table of contrast ratios for all local color styles
  • Flexible as each part is componentized
  • Enables to limit the display according to the contrast.


Future updates

  • Allow output of exact contrast ratio values for colors with opacity less than 100%.
  • Allows you to add colors manually.


Bug reports and feedback welcome!


自分の使っているカラーがコントラスト比を満たしているかわからない?

そんな時はこのプラグインを使ってみましょう。

カラースタイルの全通りの組み合わせのコントラスト比を出力します。


主な機能

  • local color styleの全通りのコントラスト比の表を生成
  • 各パーツがコンポーネント化されているので柔軟に対応ができます
  • コントラストに応じて表示を制限することが可能になります


将来的なアップデート

  • opacityがあるカラーのコントラスト比の正確な値を出力できるようにする
  • 手入力でカラーを追加できるようにする


バグ報告・フィードバックお待ちしています!

Plugin Details

Version11
CreatedNovember 9, 2021
Last UpdatedSeptember 17, 2022
CategoryAccessibility tools
CreatorAyako
Stats1243 installs, 72 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Editor Types:
    figma