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.
如何使用
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.
特征
- 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)
- 实时颜色预览 – 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
- 仅客户端 – All calculations happen in your browser
常问问题
-
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.
