WCAG AA Contrast Matrix

Every foreground/background combination tested against WCAG 2.1 standards. AA requires 4.5:1 for normal text and 3:1 for large text (18px bold / 24px regular) and UI elements.

Foreground
Midnight
Charcoal
Slate
Bone
Warm White

Recommended Pairings

Pre-tested combinations that meet WCAG AA for normal text (4.5:1 minimum). Use darker scale values (700–900) for brand colours on light backgrounds.

Text on Midnight
Aa
Warm White #F5F1EB
Primary body text
Aa
Silver #B8B5AE
Secondary body text
Aa
Solar Gold #AF8B0F
Accent headings, CTAs
Aa
Polar Sand #DFC58C
Light accent text, subheadings
Aa
Aurora Green #51B793
Positive metrics, growth indicators
Aa
Success #3D9E7A
Confirmation messages
Aa
Warning #D06A45
Caution text, alert labels
Aa
Signal Red #E05A60
Error messages, destructive labels
Aa
Info #3098B2
Informational text, tips
Text on Warm White
Aa
Text Black #020200
Primary body text
Aa
Muted #6B6872
Secondary text, captions
Aa
Violet Energy #684D7C
Accent headings, feature highlights
Aa
Nitrogen Blue #1A7489
Links, tech-forward labels
Aa
Ember Rose #B04A5A
Premium accent text, highlights
Aa
Solar Gold 700 #755D0A
Gold accent text (use 700+ on light)
Aa
Success 700 #296B52
Confirmation text on light
Aa
Warning 700 #8F482F
Caution text on light
Aa
Signal Red 700 #9A3D42
Error text on light
Aa
Info 700 #206879
Informational text on light
Text on Bone
Aa
Text Black #020200
Primary body text
Aa
Violet Energy #684D7C
Accent headings, feature highlights
Aa
Solar Gold 700 #755D0A
Gold accent text (use 700+ on light)
Aa
Solar Gold 800 #584607
Stronger gold for small text
Aa
Success 700 #296B52
Confirmation text on light
Aa
Warning 700 #8F482F
Caution text on light
Aa
Signal Red 700 #9A3D42
Error text on light
Aa
Info 700 #206879
Informational text on light

Usage Guidelines

Rules for maintaining accessibility across all brand touchpoints.

AA Normal text (under 18px bold / 24px regular) must achieve 4.5:1 contrast ratio minimum
AA Large text (18px bold or 24px+ regular) must achieve 3:1 contrast ratio minimum
AA UI components and graphical objects must achieve 3:1 contrast ratio minimum
Guidance Violet Energy and Nitrogen Blue should not be used as text colours on dark backgrounds — use as UI fills or pair with light text
Guidance On light backgrounds (Warm White, Bone), use 700–900 scale values for brand and functional colours to ensure AA compliance
Guidance Solar Gold 500 does not pass AA on light backgrounds — use Solar Gold 700 (#755D0A) or darker for text on Warm White and Bone
Guidance Muted (#6B6872) is reserved for non-essential text like placeholders and disabled labels
AA Never convey meaning through colour alone — always pair with icons, labels, or patterns