Each color shade has its own contrast color for accessibility.
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
Aa
950
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
Aa
950
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
Aa
950
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
Aa
950
Special purpose colors for backgrounds, paper surfaces, and text.
Aa
Paper
Aa
Paper (Dark)
Aa
Background
Aa
Background (Dark)
Aa
Foreground
Aa
Foreground (Dark)
See how the per-shade contrast colors work in real components and text combinations.
Primary Alert
This is an informational message with optimized contrast.
Secondary Alert
Operation completed successfully with perfect readability.
Warning Alert
Please review this action before proceeding.
Paper Surface
Cards, modals, and elevated surfaces use the paper color for a clean, neutral background.
Background Color
The main background color adapts to light and dark themes automatically.
Foreground as Background
Sometimes foreground color is used as background for high contrast elements.
Each shade now has a carefully chosen contrast color that ensures: