Flagship Design Hub

Accessibility & Contrast Hub

Test any color pair against WCAG 2.1 success criteria, audit your full brand palette in a contrast matrix, and simulate color-vision deficiencies — all in one interactive surface.

WCAG 2.1 Contrast Checker Full Palette Contrast Matrix CVD Simulation (4 Types)

Interactive Accessibility Studio

Check contrast ratios, audit palette pairs, or simulate color blindness in real-time.

Single Pair Contrast Checker

Test one foreground/background pairing against WCAG 2.1 success criteria.

Foreground color

Background color

Contrast Ratio

17.85:1

WCAG Grade

AAA

AA Small Text

Pass

AA Large Text

Pass

AAA Small Text

Pass

AAA Large Text

Pass

Excellent contrast. Safe for body text and UI labels.

Live Contrast Preview

See how your pairing renders across different UI contexts.

1. Heading Preview

Brand Headline

Supporting body text rendered at 14px for accessibility testing.

2. UI Button

3. Badge & Label

Status Badge Inverted

4. Small Text

Small text at 11px. This is the hardest size to pass. If your contrast ratio is below 4.5:1, this text will be unreadable for many users. WCAG requires at least 4.5:1 for AA compliance at this size.

CSS Custom Properties

/* Contrast: 17.85:1 — AAA */
:root {
  --a11y-fg: #0F172A;
  --a11y-bg: #FFFFFF;
}

Curated Accessibility Presets

25 production-ready accessible palettes across high-contrast themes, colorblind-safe palettes, WCAG AAA systems, and brand-inspired accessible schemes.
Click any preset to load into the studio.

25 Presets

Ink on Paper

High Contrast Light

AAA

Aa Preview

17.58:1

#1A1A1A

#FFFFFF

#2563EB

#059669

#DC2626

Timeless near-black on pure white. The highest natural contrast for long-form body text.

#classic #editorial #body-text #maximum-contrast

Charcoal on Cream

High Contrast Light

AAA

Aa Preview

14.68:1

#292524

#FAF7F2

#B45309

#0E7490

#7C3AED

Warm editorial pairing that reduces glare while maintaining AAA compliance for all text sizes.

#warm #editorial #cream #reading

Slate on Snow

High Contrast Light

AAA

Aa Preview

18.41:1

#0F172A

#FFFFFF

#6366F1

#14B8A6

#F43F5E

Cool-toned dark slate on pure white. Clean modern feel without the harshness of true black.

#slate #clean #modern #saas

Navy on Ice

High Contrast Light

AAA

Aa Preview

16.34:1

#0A1628

#F0F4F8

#1D4ED8

#0891B2

#E11D48

Deep navy text on ice-blue background. Enterprise-ready with a touch of color personality.

#navy #corporate #enterprise #blue

Forest on Mint

High Contrast Light

AAA

Aa Preview

16.72:1

#052E16

#F0FDF4

#15803D

#0369A1

#B91C1C

Deep forest green on pale mint. Organic, accessible, and distinct from the blue-gray defaults.

#green #organic #nature #wellness

Chalk on Midnight

High Contrast Dark

AAA

Aa Preview

17.77:1

#F8FAFC

#0F172A

#38BDF8

#34D399

#FB923C

Near-white text on deep slate. The standard dark-mode pairing with maximum readability.

#dark-mode #slate #standard #readable

Silver on Obsidian

High Contrast Dark

AAA

Aa Preview

14.04:1

#D4D4D8

#09090B

#818CF8

#2DD4BF

#F472B6

Slightly muted silver on pitch-dark background. Easier on the eyes for extended coding sessions.

#dark-mode #oled #developer #low-strain

Cream on Charcoal

High Contrast Dark

AAA

Aa Preview

15.55:1

#FAF7F2

#1C1917

#D97706

#0D9488

#A855F7

Warm cream text on charcoal. Reduced blue light with a softer, warmer dark theme aesthetic.

#warm #dark-mode #night #comfort

Ice on Navy

High Contrast Dark

AAA

Aa Preview

15.21:1

#E0F2FE

#0A1628

#3B82F6

#10B981

#F59E0B

Cool ice-white on deep navy. Authoritative dark theme popular in enterprise dashboards.

#navy #corporate #dashboard #enterprise

Mint on Forest

High Contrast Dark

AAA

Aa Preview

14.53:1

#DCFCE7

#052E16

#4ADE80

#38BDF8

#FBBF24

Pale green text on deep forest. Nature-themed dark mode with organic personality.

#green #dark-mode #organic #nature

CVD-Safe Primary

Colorblind-Safe

AAA

Aa Preview

18.41:1

#0F172A

#FFFFFF

#2563EB

#F59E0B

#71717A

Blue and orange primary pair safe for deuteranopia and protanopia. No red-green ambiguity.

#cvd #deuteranopia #protanopia #universal

Teal & Amber Safe

Colorblind-Safe

AAA

Aa Preview

9.06:1

#134E4A

#FFFBEB

#0D9488

#D97706

#1E293B

Teal and warm amber avoid the red-green axis entirely. Passes all four CVD simulations.

#cvd #teal #amber #safe

Purple & Gold Safe

Colorblind-Safe

AAA

Aa Preview

12.69:1

#1E1B4B

#FEF3C7

#4338CA

#CA8A04

#E5E7EB

Deep purple and gold maintain distinct hues under all four color-vision deficiency types.

#cvd #purple #gold #distinctive

Blue-Orange-Gray Triad

Colorblind-Safe

AAA

Aa Preview

10.78:1

#1E3A5F

#FFFFFF

#2563EB

#EA580C

#6B7280

Three-channel triad using blue, orange, and neutral gray. All three remain distinguishable under CVD.

#cvd #triad #data-viz #charts

Lightness-Only Scale

Colorblind-Safe

AAA

Aa Preview

17.44:1

#111111

#444444

#888888

#BBBBBB

#F5F5F5

Pure lightness ramp with no hue reliance. Immune to all CVD types by design.

#cvd #monochrome #lightness #universal

Indigo AAA System

WCAG AAA Palette

AAA

Aa Preview

15.84:1

#1E1B4B

#312E81

#FFFFFF

#EEF2FF

#C7D2FE

Full 5-color indigo system where every text/background combination passes WCAG AAA.

#aaa #indigo #full-palette #strict

Emerald AAA System

WCAG AAA Palette

AAA

Aa Preview

18.09:1

#022C22

#064E3B

#FFFFFF

#F0FDF4

#D1FAE5

Deep emerald foundation with cream and chalk accents. Every pair exceeds 7:1.

#aaa #emerald #green #strict

Warm Slate AAA

WCAG AAA Palette

AAA

Aa Preview

16.75:1

#1C1917

#292524

#FAFAF9

#F5F5F4

#E7E5E4

Warm-toned dark slate on multiple light surfaces. Every combination is AAA-safe.

#aaa #warm #slate #strict

Navy & Frost AAA

WCAG AAA Palette

AAA

Aa Preview

18.14:1

#0A1628

#0F2240

#FFFFFF

#F0F4F8

#DBEAFE

Deep navy paired with frost and sky tints. All text/surface combinations exceed AAA.

#aaa #navy #frost #corporate

Plum & Lavender AAA

WCAG AAA Palette

AAA

Aa Preview

18.36:1

#1F092B

#2E1065

#FFFFFF

#FAF5FF

#EDE9FE

Rich plum darks with lavender lights. All combinations pass AAA for body text.

#aaa #plum #lavender #luxury

Stripe-Style Accessible

Brand-Friendly Accessible

AAA

Aa Preview

15.91:1

#0A2540

#FFFFFF

#635BFF

#00D4AA

#F5F6F8

Indigo-forward palette inspired by modern payment platforms. All primary pairs are AA+.

#stripe #indigo #saas #fintech

Linear-Style Accessible

Brand-Friendly Accessible

AAA

Aa Preview

17.24:1

#F8F8FC

#121218

#5E6AD2

#26B5CE

#1C1C24

Clean dark-mode-first palette with purple accents. Optimized for developer tools.

#linear #purple #dark-mode #devtools

Vercel-Style Accessible

Brand-Friendly Accessible

AAA

Aa Preview

21.00:1

#000000

#FFFFFF

#171717

#EDEDED

#666666

Pure black and white with a focus on typographic contrast. Maximum readability.

#vercel #monochrome #minimal #developer

Notion-Style Accessible

Brand-Friendly Accessible

AAA

Aa Preview

14.64:1

#191919

#FFFFFF

#2EAADC

#EB5757

#37352F

Warm off-white with dark charcoal text. The comfortable note-taking palette with strong contrast.

#notion #warm #productivity #notes

GitHub-Style Accessible

Brand-Friendly Accessible

AAA

Aa Preview

16.72:1

#0D1117

#F0F6FC

#58A6FF

#3FB950

#F85149

Developer workspace palette modeled after code repository platforms. Dark and light variants.

#github #developer #code #repository