Check · Palette accessibility

Palette Accessibility Matrix

Compare every color against every other color in your palette. See exact contrast ratios, identify pairs that meet common text thresholds, and carry useful combinations into Colorrow’s accessibility and preview tools.

A matrix is a planning aid, not a compliance certificate. Contrast depends on the actual foreground/background use, text size and weight, component states, nearby colors, and the rest of an interface’s accessibility implementation.

Pairwise contrast

Contrast relationships

Rows are foreground colors; columns are backgrounds. Select a cell to open that exact orientation in Contrast Checker.

Open in Generator Open in Visualizer

Color pairs10

AA normal text0

AA large text0

Strongest pair—

PASS FAIL N normal text ≥ 4.5:1 L large text ≥ 3:1

Useful starting points

Strongest pairings

High contrast can help readability, but semantic meaning and visual hierarchy still matter.

How to read it

Read across foregrounds and down backgrounds

Every non-diagonal cell shows the contrast ratio for one palette color against another. Because the numeric ratio is symmetric, the same two colors have the same ratio in reverse, but the matrix keeps both directions so you can open the intended foreground/background orientation in Contrast Checker.

A PASS for normal text means the pair reaches at least 4.5:1. A large-text pass starts at 3:1. The matrix uses the unrounded ratio for pass/fail decisions and rounds only the displayed number.

Accessible planning

Plan roles before decorating screens

Start with the colors that will carry the most reading: page backgrounds, surfaces, body text, labels, and controls. Find reliable text/surface pairs first, then use lower-contrast colors for roles where text readability is not required.

A 3:1 relationship can also be relevant to some non-text component boundaries and graphical objects, but that requirement depends on the actual adjacent colors, states, and information being conveyed. Do not treat every 3:1 palette pair as a universally accessible component choice.

Contrast limitations

Contrast is necessary, not sufficient

Text size and weight determine which text threshold applies. Focus indicators, disabled states, placeholders, charts, icons, hover states, and text placed over photographs or gradients need their own checks. Color must also not be the only way important information is communicated.

For final decisions, test the exact foreground and background in context. A palette can contain several strong pairs and still produce inaccessible screens if roles are assigned poorly.

Common mistakes

Avoid these palette shortcuts

Using the rounded displayed ratio instead of the underlying value for threshold decisions.
Assuming one passing text pair makes every component or state accessible.
Using brand/accent colors as body text without checking their real surface.
Checking only light mode while shipping a separate dark-mode role mapping.
Treating large-text thresholds as permission to use tiny or lightweight text.