Loading…

How to use Contrast Grid Checker

Enter your palette colors and read the grid — each cell shows the contrast ratio and whether that foreground/background pair passes WCAG.

Frequently asked questions

What does the contrast grid show?

A matrix of every color paired against every other color, with each cell's contrast ratio and WCAG pass/fail status.

Why check all pairs at once?

It reveals which text-on-background combinations in your palette are accessible and which to avoid, in a single view.

Which WCAG levels are shown?

Each cell indicates whether the pair meets AA and AAA thresholds for normal and large text.

More Color Tools

OKLCH Color Converter
Convert HEX/RGB to and from OKLCH and OKLab (CSS Color 4)
Material Tonal Palette
Generate a 50–900 tonal scale from one base color for design systems
Complementary Color Finder
Find the exact complementary (opposite) color for any hex value
Color Inverter
Invert any color to its RGB negative (255 minus each channel)
Lighten / Darken Color
Lighten or darken any color by a precise percentage of lightness
HSL Adjuster
Shift hue, saturation and lightness of a color with live preview
Alpha Blend Calculator
Composite a translucent color over a background to a solid hex
CMYK ↔ RGB Converter
Convert print CMYK percentages to RGB / HEX and back both ways
Grayscale Converter
Convert any color to perceptual grayscale using Rec.601 luma
Sepia Tone Converter
Apply the classic sepia photo tone matrix to any color
HEX Shorthand Expander
Expand 3-digit hex to 6-digit and shorten collapsible hex codes
Pastel Color Generator
Turn any bold color into a soft pastel version instantly

← View all Color ToolsBrowse all 1,100+ tools →