Black text on white gives 21:1
Input and settings
Foreground: #000000 / Background: #ffffff
Expected result
21.00:1 / All four displayed text checks pass
Contrast Checker
Check a foreground and background pair against WCAG 2.x AA and AAA contrast thresholds.
How to use
These are example steps; replace the values for your task.
- Enter a text color and an opaque background color.
- Read the results for normal and large text.
- Check font size and weight in the actual interface.
Enter values
The background cannot be transparent. A translucent foreground is composited over the background before calculation.
Contrast result
Readability sample Aa
About this tool
The ratio uses the WCAG 2.x relative-luminance formula. Black on white produces the maximum 21:1 ratio, followed by AA and AAA text checks.
Pass results cover text contrast only. Font weight, actual text size, controls, and other accessibility requirements still need separate review.
Continue this task
- Shadow CSS Builder — After checking a card’s colors, add a CSS shadow.
- Button CSS Starter — Use checked text and background colors to prepare button HTML and CSS.
Try a use case and check the result
Compare black/white with gray text on white, separating the ratio from normal- and large-text checks.
Example buttons replace the inputs and settings above and calculate. Restore previous input steps back one example at a time. After trying multiple examples, repeat restore to return to your original input. This history is lost when the page closes.
Normal text in #777 fails AA on white
Input and settings
Foreground: #777777 / Background: #ffffff
Expected result
4.48:1 / Only AA large text passes AA normal, AAA normal and AAA large text fail
How to read the result
Text thresholds are 4.5 for AA normal, 3 for AA large, 7 for AAA normal and 4.5 for AAA large text. Determine whether the actual font qualifies as large separately. The displayed ratio has two decimals, while pass/fail uses the unrounded value: a display of 4.50 can still fail if the actual ratio is below 4.5.
Scope and limits
This compares a solid foreground with an opaque background. Translucent foregrounds are composited over that background; translucent backgrounds are rejected. Images, gradients, actual font size/weight and whole-page WCAG conformance are not assessed. Check the specified colors and criteria as well as the preview.
Verification: W3C text-contrast guidance supplies thresholds and unrounded comparisons. Independent relative-luminance calculations give 21 and about 4.478. Checks cover a 4.499 boundary, translucent-background rejection, localized pass lists and restoration.
Continue with the next task
Use black and white as a reference
Translucent text is composited onto the background before relative luminance is calculated. The raw text RGB value alone is not used.
Frequently asked questions
What is the difference between AA and AAA?
AAA requires a higher contrast ratio than AA.
What counts as large text?
WCAG defines it by font size and weight; this tool reports the threshold but cannot infer your final CSS.
Can I use a transparent foreground?
Yes. Foreground alpha is composited over the background before calculation.
Related tools
Share this tool
Share only the tool name and public URL. Your input and results are not included.
Inputs and storage
Keep any content you need before clearing. This tool does not autosave inputs or results. Reloading or closing the page, clearing inputs or resetting may discard your work.
Favorites and language preferences are stored separately and may be lost when site data is cleared. Tool resets and site-data deletion do not delete files already downloaded to your device.