What to check after the contrast ratio

Pale gray text on white is common, but visual lightness may make reading harder. A contrast tool turns an argument based on impressions into a color relationship that can be checked. Its limit matters too: a calculation describes the entered pair, not the accessibility of the whole page.

Get the inputs right

Use the actual text color and the color behind it, not a gray pixel sampled from an antialiased letter edge. A translucent card or photograph may produce different backgrounds in different places. Two fixed values may not represent the worst case. Identify the adjacent colors before deciding how many combinations to test.

WCAG AA requires at least 4.5:1 for ordinary text and 3:1 for large text, using the unrounded result. Large text has size conditions; naming an element a heading does not automatically qualify it for the lower threshold. W3C Text Contrast

Use a small difference to understand the boundary

On white, #777777 calculates to approximately 4.478:1 and fails the ordinary-text AA threshold. #767676 produces approximately 4.542:1 and narrowly passes. These values use WCAG's relative-luminance formula. The interface may display two decimal places, but it must not round first and then decide whether the result passes.

This is not a recommendation to use the second gray for every paragraph. A narrow pass leaves little margin. Thin strokes, long passages, unusual fonts, and complicated backgrounds still deserve review in context. Enlarging text just to retain a pale color may also damage the hierarchy. Compare darker text and a clearer background together.

Review all relevant states

Look beyond paragraphs to links, fields, buttons, and focus indicators. A clear default button may become unclear when hovered or focused. Essential non-text visual information has its own contrast requirements, while decorative lines should not be treated as though they all serve the same purpose as controls. W3C Non-text Contrast

Errors should not communicate only by turning red. Add understandable words, such as “Use no more than eighty characters; shorten the name and try again.” Color can support the message without carrying it alone. W3C Use of Color

For this exercise, compare three pairs in the contrast tool: body text, supporting text, and a button. Record each foreground, background, purpose, and result. Then return to the page and examine keyboard focus and error feedback. Correct the failed information first; there is no need to replace the entire design with black and white.

“This pair meets the threshold for ordinary text” is more precise than “this website passes WCAG.” Accessibility depends on many specific behaviors. Numbers help locate problems; actual use completes the judgment.