Contrast Grid - Free Online WCAG Contrast Checker Tool | IconVault
Test every foreground and background pair in one matrix with WCAG ratios, AA and AAA badges and CSV export. Free, in your browser.
Contrast Grid
WCAG contrast matrix for your whole palette
Foreground colors
Background colors
5 of 5 free exports left - WCAG 2.1 contrast math, in your browser.
| FG \ BG | #ffffff | #f1f5f9 | #0f172a | #0f766e |
|---|---|---|---|---|
| #0f172a | ||||
| #ffffff | ||||
| #0f766e | ||||
| #ef4444 |
Click any cell to inspect that pair in detail.
About this tool
IconVault's Contrast Grid checks the color contrast of your entire palette in one view. Add your foreground and background colors to see a live contrast ratio matrix where each cell shows the exact WCAG 2.1 ratio with a clear AA, AAA, AA-large or Fail badge, so failing pairs stand out instantly instead of requiring one-by-one checks.
Ratios are computed from relative luminance exactly as WCAG 2.1 defines it (4.5:1 for normal text, 3:1 for large text, 7:1 for AAA), and everything runs fully in your browser with nothing uploaded. It is free to try (repeated use may ask for Pro), and you can export the matrix as CSV for design reviews and audit reports.
Frequently asked questions
Popular searches
More tools
Code Playground
Write HTML, CSS & JS with live preview.
JSON Formatter
Beautify, validate & minify JSON.
Base64 Encoder
Encode & decode text and files.
JWT Decoder
Inspect tokens without sending them anywhere.
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon