Free Color Tools
Color Contrast Checker
Check foreground and background colors against WCAG AA and AAA contrast targets.
What this tool does
Check whether text remains readable against its background.
The checker calculates the WCAG contrast ratio between two HEX colors and tests the result against AA and AAA targets for normal and large text.
A live text preview makes the numerical result easier to judge, while pass and fail states show which use cases the pair supports.
Use the tool
Check a foreground and background color
Pick or enter two HEX colors and review the contrast targets instantly.
Choose text and background colors
Readable creative work.
Preview body text against the selected background before using the pair in a layout.
Small supporting copy should remain comfortable to read.
WCAG result
14.99:1
How to use it
Three quick steps
- 1Enter or pick the intended text and background colors.
- 2Review the live preview and calculated contrast ratio.
- 3Check the AA or AAA result for the text size you plan to use.
Worked example
Check body copy on a brand background
Dark navy #17283A on white #FFFFFF produces a high contrast ratio.
FAQ
Questions about the color contrast checker
Practical details about using the tool and understanding its result.
Keep working
Related tools
Social Media Size Guide
Find and copy current creative dimensions for 13 major platforms, including Instagram, X, Threads, TikTok, LinkedIn, and YouTube.
Open toolImage Resizer
Resize or crop JPEG, PNG, and WebP images to an exact frame with visual positioning and zoom controls.
Open toolAspect Ratio Calculator
Choose a screen, social, ratio, or print standard—or enter custom dimensions—then resize without distortion.
Open toolFrom one asset to the whole workflow
Keep accessibility decisions visible through review and approval.
Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.