Define what you are measuring
Enter the text color and actual background as three- or six-digit HEX values. The tool calculates opaque sRGB colors. For transparency, background images or gradients, first determine the actual composited background behind the text. One isolated color value is not enough.
The result checks text contrast for this color pair. It does not establish a WCAG conformance level for the whole page. Check font size, typeface, interaction states and other accessibility requirements on the actual page.
How the ratio is calculated
Divide each 8-bit channel by 255 to obtain c. If c ≤ 0.04045, its linear value is c ÷ 12.92; otherwise it is ((c + 0.055) ÷ 1.055) raised to 2.4. Relative luminance L = 0.2126R + 0.7152G + 0.0722B, using these linear channel values.
(lighter L + 0.05) ÷ (darker L + 0.05). Black and white give 21:1; identical colors give 1:1. Swapping foreground and background keeps the contrast ratio unchanged, while changing the appearance.
Rounding is not a pass
Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs at least 3:1 and 4.5:1 respectively. Large text means at least 18pt, or bold text of at least 14pt. Do not apply the large-text threshold to smaller body text.
#777777 on white has a contrast ratio of about 4.478:1, below the 4.5:1 AA threshold for normal text. A display rounded to 4.5 does not change that result. This tool shows three decimal places and uses the full calculated value for threshold decisions.
Check the colors in the actual interface
The preview shows your colors with 16px body text and a 24px heading. On the target page, verify the actual text color, background, size and weight, then check normal, hover and focus states. Do not check only the most attractive color pair in the design file.
Try darker text or a lighter background, recalculate, then inspect the letterforms and reading experience on real devices. This color check does not assess color-blind recognition, icon meaning or whole-page conformance. Record the color values and locations you checked for later review.