Color Contrast Matrix

Generate WCAG contrast ratio matrices from your color variables.

What it doesCreates a grid showing contrast ratios between background and foreground color combinations. Each cell displays the ratio and WCAG compliance level (AAA, AA, AA Large, or DNP).

FeaturesVariable mode support - Select light/dark mode when collections have multiple modesSettings persistence - Display preferences and base color save automaticallyWCAG compliance levels - AAA, AA, AA Large, and DNP indicatorsFlexible grid options - Same colors for both axes or distinct rows/columnsUsageRun the plugin (requires color variables in your file)If your collections have multiple modes (e.g., light/dark), select which mode to useSelect which color groups to include as backgroundsOptionally enable "Distinct rows and columns" to use different groups for foreground colorsClick "Generate matrix"For each screen and what its controls do, see the user guide.

SettingsClick the gear icon to configure:

Display options - Which compliance levels to show (AAA, AA, AA Large, DNP)Show full name - Display full variable paths instead of shortened namesBase color - Background color for alpha blending calculations (default: #FFFFFF)Settings persist automatically across sessions.WCAG Compliance LevelsAAA - Contrast ≥ 7:1AA - Contrast ≥ 4.5:1AA Large - Contrast ≥ 3:1 (for large text)DNP - Does not pass (< 3:1)RequirementsColor variables organized in groups (e.g., brand/primary, neutral/gray-500)