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.

All tools

Contrast Grid

WCAG contrast matrix for your whole palette

5 of 5 free uses left

Foreground colors

#0f172a#ffffff#0f766e#ef4444

Background colors

#ffffff#f1f5f9#0f172a#0f766e

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.

AAA 7.0+AA 4.5+AA-LARGE 3.0+FAIL below 3.0

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

wcag contrast checkercontrast ratio calculatorcolor contrast checkercheck color contrast onlineforeground background contrasttext color contrast testerwcag 2.1 contrast ratioaa aaa contrast checker4.5:1 contrast ratio checker7:1 contrast ratio aaalarge text contrast 3:1accessible color combinationsfind accessible color pairscolor palette accessibility testtest all color combinations at oncecontrast matrix toolcontrast grid generatoronline contrast checker freefree wcag contrast checkerweb accessibility color checkerui color contrast checkdesign system contrast testingdark mode contrast checkerbutton text contrast checkerlink color contrast testbadge color contrast wcagchart color contrast accessibilitycontrast checker csv exportexport contrast report csvrelative luminance calculatorhow to check color contrastwhat is a good contrast ratio for textwcag aa color requirementswcag aaa color requirementsdoes my website pass wcag contrastcolor contrast compliance checkeraccessible text on colored backgroundwhite text on color background contrastblack text contrast ratiobrand palette accessibility auditcheck logo color contrastwebsite color accessibility testapp color contrast checkerfigma contrast checker alternativetailwind color contrast checkmaterial design contrast checkerbootstrap color contrastcss color contrast testerhex color contrast calculatortwo colors contrast ratiomultiple colors contrast matrixbatch contrast checkercolor accessibility checker onlinereadable text color finderpick accessible text color

More tools

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

View all 10+ tools →