¿Odias los anuncios? Ir Sin publicidad Hoy 

Color Contrast Grid Generator

Desarrollador

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

APORTE

PROD.

Lado cliente

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

Guía

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.

Cómo utilizar

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.

Características

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)
Vista Previa de Color en Vivo – 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
Solo Lado del Cliente – All calculations happen in your browser

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

 Preguntas frecuentes

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.