Contrast Checker
Check whether a text and background pairing is readable, measured against the WCAG standard that most accessibility laws reference. The ratio runs from 1:1 (identical, invisible) to 21:1 (black on white). Body text needs 4.5:1 to pass AA, large text needs 3:1, and interface elements like form borders and icons need 3:1 against whatever surrounds them — a rule that gets missed far more often than the text one.
Contrast ratio
5.70:1
Text
#7C3AED
Background
#FFFFFF
- AA — normal text
- Pass (4.5:1)
- AA — large text
- Pass (3:1)
- AAA — normal text
- Fail (needs 7:1)
- AAA — large text
- Pass (4.5:1)
- UI components
- Pass (3:1)
This pairing passes AA for body text.
Nothing is uploaded — this tool runs inside your browser, so your files never leave your device.
Why use this tool
- Tests AA and AAA for both normal and large text
- Includes the 3:1 rule for UI components, borders and icons
- Uses proper WCAG relative luminance, not a simple brightness average
- Tells you plainly what to change when a pairing fails
How it works
- 1Enter your text colour and background colour.
- 2Read the ratio and which levels it passes.
- 3If it fails, darken the text or lighten the background until AA passes.
Contrast Checker — frequently asked questions
4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold) to meet WCAG AA — the level referenced by the Equality Act, the ADA and the European Accessibility Act. AAA asks for 7:1 and 4.5:1 respectively, which is rarely a legal requirement.
More colour tools
Looking for something else? Browse all colour tools
Explore the other tools
Same deal everywhere on the site — free, no sign-up, and no watermark on anything you download.
Or see every tool on one page.