Productive ToolboxColor Palette Contrast Grid
Check the WCAG contrast of every text and background combination in a color palette at once, and see which pairs pass AA and AAA.
Color Palette
Presets
Settings
Contrast Grid (20)
Export Palette
Related tools
WCAG Contrast Requirements
The Web Content Accessibility Guidelines set minimum contrast ratios so that text stays readable for people with low vision or color blindness, and for everyone on a phone in bright sunlight. Most accessibility laws and policies, including the ADA in the US and the European Accessibility Act, point to WCAG level AA.
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥ 24px, or ≥ 18.7px bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | – |
contrast = (Llighter + 0.05) ÷ (Ldarker + 0.05)
L = 0.2126 R + 0.7152 G + 0.0722 B (linearised sRGB)
Common Colors on White
| Text color | Sample | Ratio | Result |
|---|---|---|---|
| #595959 Dark gray | Sample text | 7.00:1 | AAA |
| #767676 Mid gray | Sample text | 4.54:1 | AA |
| #777777 One step lighter | Sample text | 4.47:1 | AA large text only |
| #1A73E8 Google blue | Sample text | 4.50:1 | AA |
| #34A853 Google green | Sample text | 3.05:1 | AA large text only |
| #FF0000 Pure red | Sample text | 3.99:1 | AA large text only |
Ratios are rounded down, so a pair shown at 4.50:1 really passes 4.5:1.
How to Use the Contrast Grid
- 1Enter your palette: Add your brand or design colors as HEX codes, start from a preset such as Material or Tailwind, or generate a random palette.
- 2Read the grid: Each cell shows one color as text on another as background, with its contrast ratio and WCAG level.
- 3Filter the results: Show only pairs that pass AAA or AA, only failing pairs, or sort from highest to lowest contrast.
- 4Export: Click a pair to copy its CSS, or export the whole palette as CSS custom properties or SCSS variables.
Frequently Asked Questions
What contrast ratio does WCAG require?
WCAG 2.1 level AA asks for at least 4.5:1 between text and its background, and 3:1 for large text (18pt, about 24px, or 14pt bold, about 18.7px). Level AAA asks for 7:1 and 4.5:1. Icons, input borders and other parts of controls need 3:1 against what is next to them.
How is the contrast ratio calculated?
From the relative luminance L of each color: (L1 + 0.05) ÷ (L2 + 0.05), with the lighter color on top. Luminance weights the linearised red, green and blue channels by 0.2126, 0.7152 and 0.0722, because our eyes are most sensitive to green. The ratio runs from 1:1 (same color) to 21:1 (black on white).
Why use a grid instead of checking pairs one by one?
A palette of 6 colors has 30 possible text and background pairs. The grid shows them all at once, so you can see which combinations are safe for body text, which only work for headings, and which to avoid, before they end up in a design.
What is the lightest gray that passes on white?
#767676, at 4.54:1. One step lighter, #777777, gives 4.47:1 and fails AA for normal text. That is why this tool rounds ratios down: a value shown as 4.5:1 always passes.
Does passing the contrast check make a design accessible?
It covers one important criterion. Also make sure color is not the only way information is shown (add labels or icons to red and green states), that focus outlines are visible, and that text can be resized.
Related Tools
Color Palette Generator
Generate harmony-based palettes with export and contrast checks.
Color Palette Extractor
Upload image to get 5 dominant colors.
Contrast Checker
Test WCAG AA and AAA color contrast accessibility.
Color Blindness Simulator
Apply SVG filters for accessibility preview.
HSL Color Slider
Adjust hue, saturation, and lightness with live preview.
Random Hex Color Generator
Spacebar to refresh color inspiration.
Color Format Converter
Convert HEX, RGB, HSL, HSV and CMYK, including alpha and CSS color names.
CSS Mesh Gradient Generator
Create trendy multi-color backgrounds.
Custom Scrollbar Styler
Design webkit-scrollbar styles visually.
CSS Keyframe Animator
Timeline UI to build @keyframes.
Pattern Noise Generator
Create grain/noise texture for UI depth.
CSS Cursor Style Previewer
Test and preview all CSS cursor types with interactive examples.