About Theme Palette Matrix & Contrast Validator
Test brand palettes and UI themes against an N x N contrast matrix. Identify accessible color combinations for backgrounds, cards, typography, and interactive controls instantly.
Key Capabilities & Features
- Custom theme palette manager (add/remove colors)
- Pairwise N x N contrast ratio matrix
- Instant Level AA and AAA pass/fail badges
- Visual color swatch preview per pair
- Responsive table layout with hover highlights
How to Use Theme Palette Matrix & Contrast Validator
Configure Palette
Add your brand colors, background surfaces, and text hues.
Inspect Matrix
Examine contrast ratios for all foreground/background pairs.
Select Combinations
Pair compliant colors for primary copy, muted text, and buttons.
Privacy & In-Browser Execution Guarantee
100% client-side theme evaluation. Palette colors are saved only in your local session.
Frequently Asked Questions
How many colors should be in an accessible palette?
Design systems typically maintain 5 to 10 foundational colors: dark text, light background, card surface, primary brand, secondary accent, and status hues (success, danger, warning).
Can primary brand colors fail text contrast?
Yes, vibrant brand colors (like bright cyan or yellow) often fail 4.5:1 text contrast on white. They can still be used for large backgrounds or decorative accents, but not body text.
What does WCAG SC 1.4.11 require for UI components?
Active user interface components (such as form inputs, buttons, and slider tracks) must have a contrast ratio of at least 3.0:1 against adjacent background colors.