PRACTICAL GUIDES · Web and codes
Check text contrast without rounding away a failure
Colors that look different can still produce hard-to-read text. Measure the actual foreground-background pair, then consider text size, background conditions and interface states.
1. Collect the actual color pair
Identify the text color and the background immediately behind the letters. A general palette is insufficient because the same text may appear on several surfaces.
Our tool compares two opaque hexadecimal colors. It does not automatically scan a page or reconstruct transparency, images and gradients beneath its text.
2. Choose the criterion that fits the text
For WCAG AA normal text, the minimum ratio is 4.5:1; for large text, it is 3:1. The category depends on the criterion’s size and weight definition, rather than whether the element is a heading.
For Latin text, large means at least 18-point regular or 14-point bold, with equivalent provisions for other scripts. When classification is uncertain, test against the stricter requirement.
Color contrast checker for WCAG3. Read both ratio and verdict
Enter both colors in Color contrast and read the verdict for the relevant text category. A ratio displayed to two decimal places can hide a threshold-level difference.
Do not round upward to claim a pass. The tool applies thresholds to the calculated value before display rounding, so review its verdict as well as the number.
TRY THIS STEP
Color contrast checker for WCAG
Use the full calculator here: load the example values, then change one input at a time and compare the result with the steps in this guide.
A reproducible example
Load #777777 on #FFFFFF and run: about 4.48:1, failing AA for normal text. Change only the text to #767676: about 4.54:1, passing that threshold. Verdicts use the unrounded ratio, rather than how the sample looks.
Result
Your result will appear here.
4. Example: neighboring gray values
On white, #777777 produces approximately 4.48:1 and fails AA for normal text. #767676 produces about 4.54:1 and passes that threshold. The visible difference is small, but the requirement is exact.
Two grays on the same white background
- Starting point
- Background #FFFFFF; foreground #777777 or #767676
- Result
- About 4.48:1: fails normal AA. About 4.54:1: passes normal AA.
These are illustrative samples. Explicit labels provide the colors, ratios and outcomes so the example does not communicate through appearance alone.
-
#777777 on #FFFFFF
About 4.48:1 — below normal-text AA.
-
#767676 on #FFFFFF
About 4.54:1 — meets that threshold.
5. Repeat for themes and interaction states
Check body text, links, secondary text and button labels against their actual surfaces. Repeat in dark mode and relevant interaction states rather than assuming color inversion fixes every case.
Text over changing backgrounds needs the actual combinations checked, including the least favorable one. A single sampled point from an image cannot represent its entire surface.
| Criterion | Minimum ratio |
|---|---|
| AA normal text | 4.5:1 |
| AA large text | 3:1 |
| AAA normal text | 7:1 |
6. Assess readability beyond the ratio
A passing ratio does not establish complete accessibility. Text size, weight, spacing, meaning and reliance on color still need review in the real interface.
Consider a larger margin when you are just above a threshold. When a color communicates an outcome, retain text or shape cues so the distinction does not depend on hue alone.
These are example inputs, rather than measurements of a real case. Results use the full tool’s calculation engine. Compare them with the worked steps in this guide, then tick the checks after reviewing.
Sources and method
Frequently asked questions
Does passing certify WCAG compliance?
No. It checks the particular contrast conditions and input colors. Other accessibility requirements need separate evaluation.
Can I enter the color of a transparent layer?
You need the effective color after compositing onto its background. This opaque two-color test does not reconstruct the full page composition.