How to use Contrast Checker
- Enter the text color and the solid color directly behind the text.
- Choose a target for the suggested text color: AA normal, AA large or AAA normal.
- The ratio and the AA and AAA text results update as you change the colors.
- If the selected target fails, review the suggested text color and check it in your actual layout.
Example: Contrast Checker
Check medium gray text on a white page.
Options
- Text and background
- Enter opaque HEX, RGB or HSL colors. The preview uses the two parsed colors, but the numeric ratio is the check to read. A photo, pattern, gradient or transparent layer may change the effective background at each point.
- Suggested color target
- The suggestion moves only the text color toward black or white, then chooses the smaller passing adjustment along those two paths. It is not a search through every possible color or a complete accessibility audit.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
How this page calculates contrast
Each RGB channel is converted to linear light, then combined into relative luminance. The ratio compares the lighter and darker luminance values. This is the text-contrast method in WCAG 2.2, not a measure of color difference or readability in every situation. The AA and AAA labels here apply only to the listed text contrast criteria; they do not say that the whole page conforms to WCAG.
Questions about Contrast Checker
Why can 4.48:1 pass large text but fail normal text?
WCAG 2.2 sets different minimums for its text categories. AA needs 4.5:1 for normal text and 3:1 for large text, so 4.48:1 falls between them. Check whether your actual font meets the standard's large-text definition before using the lower threshold.
Is the suggested color the nearest possible passing color?
It is the smaller adjustment found along two straight paths, one toward black and one toward white. Another hue may also pass and be a better design fit. Recheck the final colors after placing them in your page.
Can I use this result over an image?
The calculation assumes one solid background color. An image or gradient can be lighter or darker under different letters, so check the actual text area separately or give the text a solid background before relying on the ratio.