IconVault logoIconVault
Sign in

Contrast Checker - WCAG AA & AAA Ratio Tool | IconVault

Check text-to-background contrast ratios against WCAG 2.1. Live preview, AA/AAA pass-fail badges, one-click color swap and an auto-suggest fix for failing pairs - free in your browser.

All tools

Contrast Checker

WCAG contrast ratios for accessible UI.

5 of 5 free uses left

Text (foreground)

Background

5 of 5 free checks left.

The quick brown fox

Sample paragraph text at a regular reading size.

Small uppercase label

Contrast ratio

17.74:1

✓ AA normal✓ AA large✓ AAA normal✓ AAA large

WCAG 2.1: normal text needs ≥ 4.5:1 for AA and ≥ 7:1 for AAA; large text (18pt+ or 14pt+ bold) needs ≥ 3:1 for AA and ≥ 4.5:1 for AAA.

About this tool

IconVault's Contrast Checker computes the WCAG 2.1 contrast ratio between any text and background color - the number that decides whether your text is readable for everyone, including the 1 in 12 men with color-vision deficiency. It renders a live preview of your exact pairing and scores it against all four bars: AA normal, AA large, AAA normal and AAA large. Ratios recalculate live as you type, a swap button flips foreground/background, and “Suggest AA fix” auto-nudges your text color to the nearest passing shade.

Everything runs in your browser with zero uploads. Every visitor gets 5 free checks - Pro members ($12/year) get unlimited checks plus unlimited use of the Color Converter, Box Shadow Generator and every other IconVault tool.

Frequently asked questions

Popular searches

contrast checkercolor contrast checkerwcag contrast checkercontrast ratio checkeraccessibility contrast checkertext contrast checkercheck color contrastwcag aa checkerwcag aaa checkercontrast ratio calculatorcolor contrast ratioweb accessibility checkeraa contrast checker4.5:1 contrast checker7:1 contrast checkercolor contrast testercontrast checker online freewebsite contrast checkerui contrast checkertext background contrastreadability checker colorscolor blindness contrast checkeraccessible color combinationswcag 2.1 contrastcontrast checker for designerscontrast checker for developersfigma contrast checker alternativetailwind contrast checkercheck contrast of hex colorshex contrast ratiorgb contrast ratio calculatorlarge text contrast requirementnormal text contrast requirementaa large text contrastcolor contrast guidelinesminimum contrast ratio wcagcontrast checker no signupdark mode contrast checkerlight mode contrast checkerbutton contrast checkerlink color contrastplaceholder text contrastgray text contrast ratiowhite text on color background contrastblack text contrastcontrast checker toolonline accessibility checker colorada color contrastsection 508 contrast checkerdesign system contrasttoken contrast checkerbrand color accessibilitycontrast checker api alternativefree axe contrast alternativecolor contrast pass failimprove text readability colorsfix low contrast textcontrast ratio explained

More tools

Color Converter

HEX, RGB & HSL with a live picker.

Gradient Generator

CSS gradients with copy-paste code.

Box Shadow Generator

Layered CSS shadows, visually.

Image to SVG

Vectorize PNG & JPG into clean, scalable SVG - free preview, instant download.

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 →