Contrast Matrix

Compare foreground and background color pairs with contrast ratios and grades.

<ContrastMatrix
  only={props.brand.colors.swatches.slice(0, 3).map(({ id }) => id)}
  threshold={4.5}
/>

Usage

Compare all named swatches from Colors. The opening preview limits the matrix to the first three swatches to keep it compact.

<ContrastMatrix />

Examples

Compare every named swatch

Omit only to include the complete configured swatch set on both axes. The opening preview instead selects the first three IDs; use that approach to focus on a subset without changing configuration order.

<ContrastMatrix />

Raise the pass threshold

Use threshold to decide which ratios receive a failing strike-through. This example keeps the same three swatches as the opening preview and raises the threshold to 7.

<ContrastMatrix
  only={props.brand.colors.swatches.slice(0, 3).map(({ id }) => id)}
  threshold={7}
/>

Reading and selecting pairs

Rows represent text colors and columns represent backgrounds. Cells show a ratio rounded to two decimal places and a grade; the underlying unrounded ratio is compared with threshold. Changing the threshold changes the strike-through, not the grade calculation. Same-color cells show a dash instead of sample text.

only uses named swatch IDs from brand.colors.swatches. Filtering preserves configuration order and silently omits unknown IDs. Unlike Color Palette, reordering IDs in only does not reorder the matrix.

API reference