Contrast Grid Checker
Check contrast ratios for all color combinations in your palette.
Why Check All Color Combinations?
When building design systems and color palettes, it's not enough to check just a few color pairs. Every combination of foreground and background colors in your palette needs to be accessible. A contrast grid gives you a complete picture of which color combinations work well together and which ones need adjustment.
This is especially important for component libraries where users might combine any color with any other color. Our contrast grid checker tests all N×N combinations and shows you exactly where problems exist.
WCAG Contrast Requirements
AA Level
- Normal text: 4.5:1 minimum
- Large text (18pt+): 3:1 minimum
- UI components: 3:1 minimum
AAA Level
- Normal text: 7:1 minimum
- Large text (18pt+): 4.5:1 minimum
- Enhanced contrast for critical content