← All plugins

Mode Matrix

Every mode of a screen side by side, Light and Dark, brands, densities, each copy checked for contrast.

What it does

Mode Matrix reads the variables a frame really uses, follows aliases to their collections, and lays out one copy per mode: Light and Dark as rows, brands as columns, any other collection fixed to the mode you pick. Every copy is set to its modes with Figma's own mode switching, so it is exactly what a developer would see.

Each copy is then checked: text that drops below WCAG AA in that mode, with both colors and the ratio, and variables with no value in a mode. Click a cell to select the failing layers, run it again to update the board in place, and copy the result as Markdown for the pull request.

  1. Pick rows and columns

    Any two collections: Light and Dark by brand, density, platform.

  2. Every mode, checked

    Text contrast per copy, and values missing in a mode.

  3. Click a cell, see why

    Both colors, the ratio, and one click to select the layer.

  4. Ready for the pull request

    Copy the whole matrix as Markdown.

Everything it does

Builds

  • One copy per mode, or a grid of two collections
  • Other collections fixed to a mode you pick
  • Run again to update the board in place

Checks

  • Text contrast per mode (WCAG 2.2 AA)
  • Paint and variable opacity counted
  • Variables with no value in a mode

Hands off

  • Select the failing layers from any cell
  • Both colors and the ratio for each fail
  • Markdown report for the pull request

10 free uses, then one license or Lab Pro. See pricing →

More plugins