Skip to content
Telemetry Design UX ToolsField notebook

Accessibility

Color Contrast Matrix

Test every combination in your brand palette and quickly see which colors meet accessibility contrast requirements.

Your colors

2 colors are included in the matrix. Black and White stay in every comparison.

Add a brand color

#

Paste #RGB, #RRGGBB, or the same values without the hash.

  • #000000 — Black

    Baseline

    Always included

  • #FFFFFF — White

    Baseline

    Always included

What the palette tells you

Black and White meet AA for regular text — 21:1.

Best text colors

Colors that work as text against the most other palette colors.

  1. Black#000000works on 1 of 1
  2. White#FFFFFFworks on 1 of 1

Needs attention

Lowest-contrast pairs for regular text. These usually fail as body copy.

Every unique pair currently meets AA for regular text.

Contrast ratios in this summary use WCAG relative luminance. Black versus white is 21:1.

Contrast matrix

Rows are text (foreground). Columns are background. Each square previews that pairing. Open a square for the full pass/fail breakdown.

  • AAA Enhanced
  • AA Regular text
  • Large Large text / UI
  • Fail Too low
Color contrast matrix. Rows are text colors, columns are background colors. Pass and fail are also announced in each cell label, not only by color.
Text \ BackgroundBlack#000000White#FFFFFF
Black#000000
White#FFFFFF