Contrast guidance

Color Contrast Library

Browse accessible color pair examples, contrast ratio guidance, and copyable color combinations.

Color ContrastWCAGDesignAAAAA

WCAG Contrast Targets

Contrast ratios help make text, icons, focus states, and component boundaries easier to see. Ratios are only one part of readability, but they are a reliable starting point.

Normal text AA: 4.5:1 or higher.
Large text AA: 3:1 or higher.
Normal text AAA: 7:1 or higher.
Large text AAA: 4.5:1 or higher.
Meaningful graphics, icons, focus indicators, and UI component boundaries: 3:1 or higher against adjacent colors.
Disabled controls are not required to meet the same contrast target, but unreadable disabled UI can still confuse users.

Official references

Pass and Fail Contrast Examples

Use these examples to review text, buttons, focus rings, charts, and states.

Body text

Pass

Slate text #0F172A on white has excellent contrast for long-form reading.

Fail

Light gray text #94A3B8 on white is difficult to read for body copy.

Fix guidance: Use strong contrast for body text and reserve low-contrast gray for non-essential decoration.

Button text

Pass

White text on a dark blue button stays readable in normal, hover, focus, and disabled-adjacent states.

Fail

Light blue text on a medium blue button looks branded but fails readability.

Fix guidance: Test every state, not just the default button.

Focus indicators

Pass

A 2px dark blue outline around a light card has at least 3:1 contrast against adjacent colors.

Fail

A pale gray focus ring disappears on a white page.

Fix guidance: Keyboard focus must be visible and not hidden by shadows, sticky headers, or clipping.

Charts and status colors

Pass

Charts combine labels, patterns, or icons with color.

Fail

A dashboard relies on red and green alone to show failed and passed checks.

Fix guidance: Do not use color as the only way to communicate status.

Copyable Color Combinations

These pairs are useful starting points for accessible SaaS pages, reports, and dashboards.

Primary blue on white

Good for links and primary button text on a light background.

Foreground: #1D4ED8
Background: #FFFFFF
Approximate ratio: 6.70:1
Use for: links, active tabs, primary text accents

White on primary blue

Good for primary buttons.

Foreground: #FFFFFF
Background: #1D4ED8
Approximate ratio: 6.70:1
Use for: primary buttons, call-to-action blocks

Emerald on white

Good for success text and positive status labels.

Foreground: #047857
Background: #FFFFFF
Approximate ratio: 5.48:1
Use for: success text, passed check labels

Red error on white

Good for error text. Pair it with an icon or text label, not color alone.

Foreground: #B91C1C
Background: #FFFFFF
Approximate ratio: 6.47:1
Use for: field errors, destructive warnings

Slate on light blue

Good for body copy inside subtle product panels.

Foreground: #0F172A
Background: #EFF6FF
Approximate ratio: 16.79:1
Use for: cards, report summaries, callout panels

Dark blue focus on white

Good for visible focus indicators.

Foreground: #1E40AF
Background: #FFFFFF
Approximate ratio: 8.72:1
Use for: focus outlines, selected states

Contrast Review Checklist

Contrast testing should include realistic UI states, not isolated brand colors only.

Check text at the actual font size and weight used in production.
Check hover, focus, active, selected, disabled-adjacent, error, and success states.
Check charts and badges without relying on color alone.
Check text over images, gradients, and translucent panels.
Check mobile and dark-mode variants separately.
Check high zoom and Windows contrast settings when the audience depends on them.