Les pubs vous déplaisent ? Aller Sans pub Auj. 

Color Contrast Grid Generator

Promoteur

PUBLICITÉ · RETIRER?

SAISIR

SORTIR

Côté client

PUBLICITÉ · RETIRER?

Guide

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.

Comment utiliser

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.

Caractéristiques

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)
Aperçu des couleurs en direct – 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
Côté client uniquement – All calculations happen in your browser

PUBLICITÉ · RETIRER?

 FAQ

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.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

PUBLICITÉ · RETIRER?