Color Contrast Grid Generator
Color Contrast Grid Generator Enter your brand or design system colors and generate a complete WCAG contrast matrix showing the contrast ratio for every possible foreground/background combination. Instantly see which color pairs pass AA, AAA, or fail accessibility requirements — essential for building accessible design systems and style guides. How to Use Enter hex colors one per line (with optional labels like “Primary #3B82F6”), or select a preset palette. Click Generate Grid to create the contrast matrix. Each cell shows the contrast ratio with the actual foreground color on the actual background, color-coded by WCAG compliance level. Features N×N Contrast Matrix – Every foreground/background combination tested and displayed in a ...
ツールを試す »