How to check color contrast on a website

Identify the text and its actual background

Start with one specific element: a paragraph, form label or button caption. Record the text color and the background directly beneath it. A color declared in one class may be overridden by another rule, so inspect the element’s computed styles in the browser. Transparency also changes the effective color when it blends with the background. The checker accepts opaque three- or six-digit HEX colors. If the design uses transparency, determine the composited color first. Do not automatically substitute a color sampled from a compressed screenshot for the CSS value: anti-aliasing can produce many different shades along the edges of letters. Keep the original color values available for comparison.

Read the ratio and the four separate results

Enter both codes and select Check contrast. A ratio of 1:1 represents colors with equal luminance; black on white gives 21:1. The four results distinguish AA and AAA for normal and large text. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. The decision uses the complete value before the displayed number is rounded. Leave some margin when choosing a pair close to a threshold. A passing result checks this particular text contrast. It does not certify the whole page, which also depends on keyboard operation, labels, content order and other criteria. Evaluate those concerns in the actual interface.

Use a test that you can reproduce

Load the black-and-white example and check that the ratio is 21:1 and all four results pass. Then change the text to #777777 on #FFFFFF. The ratio is approximately 4.478:1: normal text fails AA even if a display with few decimal places looks close to 4.5. Restore a darker shade and compare again. Change one variable at a time to understand what improved the result. Save both color codes with the result and the reviewed component. Downloaded TXT preserves the output, but a useful record also identifies where those colors are used. Repeat the check after editing the stylesheet rather than assuming that an earlier result still applies.

#000000 / #FFFFFF → 21:1
#777777 / #FFFFFF → 4.478089453577214:1

Check text size without confusing px and rem

The large-text category begins at 24 CSS pixels for regular-weight text, or approximately 18.67 pixels for bold text. Inspect the computed size and weight rather than relying on the appearance of the preview. If the design expresses sizes in rem, use the converter with the actual base of the html element. With a 16 px root, 1.5 rem equals 24 px; with a 20 px root, 1.5 rem equals 30 px. The converter’s initial base is a convenience rather than a measurement of your page. Changing units alone does not make small or very thin text readable. Verify the component with its actual font and content.

Review changing states and backgrounds

Check visited links, focus styles, hovered buttons and error messages separately. Avoid using a color difference as the only way to convey a state: add text, a recognizable icon or another indication. When using the gradient generator, remember that a two-color background contains intermediate shades and changes with the dimensions of the element. A pair of samples does not automatically validate the entire transition. Inspect the areas underneath the actual text, or place a uniform surface behind the words. Finally, test the component in context, with browser zoom and in a narrow viewport. Keep the final colors alongside the component’s styles so later revisions can be checked consistently.