Text color contrast checker
Compare opaque sRGB text colors with unrounded WCAG contrast thresholds.
Your inputs
Your results
Ready when you areYour results will appear here.
How it works
Calculate WCAG sRGB relative luminance and compare the unrounded contrast ratio with normal and large text thresholds. A plain preview and text report retain the supplied colors without changing the website palette.
A few things to know
Opaque 3/6-digit sRGB hex only. No alpha, gradients, wide-gamut colors, imagery, rendered antialiasing or non-text contrast testing. WCAG has exceptions; a passing color pair does not establish accessibility of a page.
When to use this tool
Text contrast depends on the difference in relative luminance between a foreground and background, not simply whether two colors look different. Supply two opaque sRGB hex colors to see their ratio and separate normal- and large-text threshold results. Decisions use the unrounded value, because rounding can move a near-boundary value across a displayed threshold. The preview illustrates the supplied pair without changing this site’s palette. A passing pair does not establish a page’s accessibility: actual text size, weight, exceptions and the rendered background still need review.
- Check a proposed text and solid-background pair.
- Investigate a ratio close to an AA threshold.
- Save a short color-pair report for a design review.
How to use text color contrast checker
Enter two opaque hex colors
Use #RGB or #RRGGBB for text and background. Transparency and wide-gamut values are unsupported.
Review normal and large text separately
Read the ratio, AA and AAA results. Apply large-text status only when the actual size and weight meet the definition.
Inspect the preview and report
Use the preview as an illustration and download the text report. Check the actual page background, font treatment and any applicable exceptions separately.
Black text on white
Inputs
Text #000000, background #ffffff.
Result
The ratio is 21:1 and meets the displayed normal and large AA/AAA thresholds.
What it means
This verifies the supplied pair; it does not audit layout, interaction, focus indicators or a whole website.
Common mistakes to avoid
Comparing a rounded ratio
A displayed rounded number can obscure a failure just below a threshold. Decisions use the underlying ratio.
Calling any heading large text
The actual text must meet the size/weight definition. A semantic heading tag alone does not qualify.
Ignoring the actual background
A gradient, image or translucent layer may render a different pair from the solid colors entered.
Frequently asked questions
Definitions, edge cases, and practical next steps for this tool. Search all tool FAQs ↗
Which color formats are supported?
Opaque three- or six-digit sRGB hex with a leading #. Short values are expanded. Alpha, named colors, gradients and wide-gamut values are not accepted.
What is normal-text AA?
For the supplied pair, the minimum tested ratio is 4.5:1. Review the criterion’s exceptions and actual rendered text context separately.
What qualifies as large text?
At least 18 points, equivalent to 24 CSS pixels, or bold at least 14 points, about 18.67 CSS pixels. A label in this tool does not change your rendered text.
Why can 4.5 displayed near a boundary still fail?
The classification uses the unrounded ratio. A value just below 4.5 does not meet that threshold even if a short display rounds upward.
What are the AAA thresholds?
The displayed checks use 7:1 for normal text and 4.5:1 for large text. These are color-pair results, not an overall conformance assessment.
Does reversing foreground and background change the ratio?
No. The ratio compares lighter and darker luminance symmetrically. The visual effect and reading context can still differ.
Can it test buttons, icons or focus indicators?
This tool explains text contrast. Non-text criteria and interaction states require their own review rather than a blanket conclusion from these text results.
Does a passing result mean the website is accessible?
No. Content, keyboard access, structure, labels, focus, motion and many other requirements are not inspected by a two-color calculation.
Sources and method
Use the references below to check definitions and platform guidance. The model’s scope and limits are explained above. Read our editorial standards.