Color Contrast Grid Generator
Führung
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.
Anwendung
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.
Merkmale
- N×N Contrast Matrix – Every foreground/background combination tested and displayed in a visual grid
- WCAG Color Coding – Green for AAA (≥7:1), yellow for AA (≥4.5:1), and red for fail (<4.5:1)
- Live-Farbvorschau – Each cell rendered with actual foreground text on actual background color
- AA Large Text – Also indicates AA Large Text compliance (≥3:1) for larger type sizes
- Summary Statistics – Total pairs tested, AAA passes, AA passes, and failures at a glance
- Preset Palettes – Quick-load Tailwind, Material Design, or monochrome color palettes
- Up to 20 Colors – Supports palettes from 2 to 20 colors
- Nur Client-seitig – All calculations happen in your browser
Häufig gestellte Fragen
-
What do the WCAG contrast levels mean?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios for text readability. AAA (≥7:1) is the highest standard, ensuring text is readable for users with moderate visual impairments. AA (≥4.5:1) is the minimum standard for normal-sized text. AA Large (≥3:1) applies to text that is 18pt or larger (or 14pt bold). Most accessibility laws and standards require at least AA compliance for web content.
-
Why do I need a contrast grid instead of checking pairs individually?
A contrast grid shows every possible color combination in your palette at once, revealing problems you would miss checking pairs one at a time. Design systems often have 8-15 colors that might be used in various foreground/background combinations. A grid with 10 colors tests 100 pairs simultaneously, instantly showing which combinations are accessible and which are not. This is essential for creating comprehensive accessibility documentation for design teams.
-
How is the contrast ratio calculated?
The WCAG contrast ratio uses relative luminance, calculated from linearized sRGB values. Each color channel is converted from gamma-encoded sRGB to linear light using the formula: if the sRGB value is 0.03928 or less, divide by 12.92; otherwise, raise (value + 0.055) / 1.055 to the power of 2.4. The relative luminance is then 0.2126×R + 0.7152×G + 0.0722×B. The contrast ratio is (lighter luminance + 0.05) / (darker luminance + 0.05), always yielding a value between 1:1 and 21:1.
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
Unverzichtbare Tools
Alle Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug was added on Apr. 1, 2026
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
