USEFUL TOOLS. LESS HASSLE.WCAG Ratio
The exact contrast ratio between your text and background colors.
DESIGN TOOL / ACCESSIBILITY
Free Color Contrast Checker
Check the contrast ratio between text and background colors against WCAG AA and AAA standards. See at a glance whether your colors are readable and get a suggested fix.
Includes a live preview, and handles semi-transparent colors by blending them over the background.
✓ Free to use · No signup required · Processed in your browser
Contrast Checker workspace
PICK TEXT AND BACKGROUND COLORS · SEE THE RATIO · CHECK WCAG
Not a recognised color.
Not a recognised color.
—
The quick brown fox
Normal text sits at 16px. Small body copy like this is where low contrast hurts readability the most.
Large text
Pick or type two colors to check their contrast.
Based on the WCAG 2.1 contrast formula. Semi-transparent text colors are blended over the background first. Passing the ratio is one part of accessibility — also consider font size, weight and context.
CONTRAST CHECKER WORKSPACEMOSANKIT / DESIGN & COLOR
THE BASICS
What Is Color Contrast?
Contrast ratio measures how different two colors are in brightness, from 1:1 (identical) to 21:1 (black on white). The higher the ratio, the easier text is to read — especially for people with low vision, colour blindness, or anyone reading on a phone in bright sunlight.
The Web Content Accessibility Guidelines (WCAG) set minimum ratios: 4.5:1 for normal text at level AA, 3:1 for large text and interface components, and higher values for the stricter AAA level.
BUILT FOR THE JOB
Key Features of MoSanKit Contrast Checker
AA and AAA Results
Pass or fail for normal text, large text and UI components at both levels.
Live Preview
See your colors on sample headings, body text and large text.
Swap Colors
Flip text and background to compare.
Suggested Fix
Get a nearby text color that reaches 4.5:1, keeping the same hue.
Private by Design
Everything runs in your browser.
QUICK AND SIMPLE
How to Check Color Contrast
01 / COLORS
Enter two colors
Text color and background color, as HEX, rgb() or a name.
02 / RATIO
Read the ratio
See the contrast ratio and an overall verdict.
03 / WCAG
Check the levels
AA and AAA for normal and large text and UI.
04 / FIX
Adjust if needed
Use the suggestion button to find a passing color.
MADE FOR EVERYDAY WORK
Who Can Use This Tool?
Web DesignersCheck palettes before handing off.
Front-end DevelopersVerify components meet WCAG.
Accessibility SpecialistsAudit color choices quickly.
Brand TeamsTest brand colors for readability.
Content CreatorsMake sure text over images and banners is legible.
StudentsLearn accessible design.
GOOD TO KNOW
A few things, answered.
Quick answers about using the MoSanKit Contrast Checker.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (about 18pt, or 14pt bold) and for interface components like buttons and form borders. AAA requires 7:1 for normal text and 4.5:1 for large text.
At least 18 point (24 CSS pixels) or 14 point (about 18.7 pixels) bold.
No. It is an important check, but readability also depends on font size, weight, spacing and context. Don't rely on color alone to convey meaning.
A semi-transparent color is blended over the background (and the background over white) before the ratio is calculated.
It keeps your text color's hue and saturation and moves its lightness toward black or white until it reaches 4.5:1.
No. All calculations happen in your browser.
KEEP BUILDING
Explore More Design & Color
Readable for everyone,
checked in seconds.
Explore more free design and color tools from MoSanKit.