🌍
Color Accessibility Palette Checker
100% LocalAudit entire color palettes for WCAG compliance.
Color Accessibility Palette Checker
Palette Weaver
Input your brand colors to audit for accessibility.
#3B82F6
#FFFFFF
#111827
#10B981
Simulation Mode (BETA)
WCAG 1.4.3 Compliance
Normal text requires 4.5:1. Large text (18pt+) requires 3:1. AAA targets 7:1 for silver-tier inclusivity.
Inclusion Matrix
Cross-reference of every possible foreground/background combination.
Audit Engine: sRGB-Relative-Luminance v1
Optimal
Critical
Try:
This tool runs entirely in your browser. Your input is never uploaded, logged, or sent to AllDevToolsHub or anyone else, and it keeps working offline once the page has loaded.
Pick foreground and background colors. WCAG 2.1 contrast ratios display for AA and AAA compliance.
Learn More
Overview
What is Color Accessibility Palette Checker?
Enter your brand palette to instantly see a contrast matrix of every color combination, flagged for WCAG 2.1 AA and AAA compliance at scale.
FAQ
Frequently Asked Questions
Reference
Technical Deep Dive
Color Accessibility Palette Checker
Verify color inclusivity at scale. Enter your brand palette and instantly see a contrast matrix of all possible combinations, flagged for WCAG 2.1 AA/AAA compliance.
Pixel-Precise Output
Generates CSS, tokens, or assets that match what your design system expects.
Live Visual Preview
See changes the moment you make them, no copy-paste cycle between tool and IDE.
Copy-Paste Ready
Output is formatted for direct use in stylesheets, Tailwind configs, or Figma tokens.
01 Contrast Threshold Matrix
| Standard | Target | Normal Text | Large Text / UI |
|---|---|---|---|
| WCAG AA | Baseline | 4.5:1 | 3.0:1 |
| WCAG AAA | Strict | 7.0:1 | 4.5:1 |
| Non-Text | Graphic | 3.0:1 | 3.0:1 |
02 Palette Validation Pipeline
1
Color Token Normalization
Hex, RGB, and HSL tokens are parsed and converted to a standardized linear RGB workspace for luminance calculation.
2
Relative Luminance Audit
The algorithm applies the WCAG formula
(L1 + 0.05) / (L2 + 0.05) to every unique foreground/background pair.
3
Matrix Generation
The results are projected onto a visual grid, highlighting compliance statuses and numeric contrast ratios in real-time.
03 WCAG Contrast Requirements Explained
-
AA vs AAA Standards WCAG 2.2 defines two conformance levels for text contrast: AA requires a minimum 4.5:1 ratio for normal text and 3:1 for large text (18px+ or 14px+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text. Most legal accessibility requirements (ADA, EAA, Section 508) mandate AA compliance as a minimum.
-
APCA: The Future of Contrast The Accessible Perceptual Contrast Algorithm (APCA) is the next-generation contrast model being developed for WCAG 3.0. Unlike the current luminance-ratio method, APCA accounts for font size, weight, and polarity (light-on-dark vs dark-on-dark). APCA produces more perceptually accurate results, especially for colored text and dark mode interfaces.
04 Related Tools
You Might Also Need
RJRahul JalavadiyaFounder & Lead Engineer
Last reviewed 2026-07-29