How To Check Text Color Contrast Against WCAG AA And AAA

The color you love on a large heading can be hard to read in a small caption. Checking contrast means measuring the text color against the background it actually appears on, then comparing that result with the requirement for that text.

You do not need to rebuild your brand palette to start. Choose one text-and-background pair, identify its size and weight, and test it. Fix that pair before moving to the next component.

Choose The Colors A Reader Sees

Start with body text, form labels, buttons, links and supporting copy. Record the foreground and background for each, including hover, focus and error states that contain text.

Do not test a brand color against white if the real page puts it on a photo. A translucent panel, gradient or image can change the effective background. Inspect the area directly behind the text and check the least favorable pairing the reader may encounter.

For a flat-color design, use the actual color values from the page or design file. A screenshot can be a useful visual check, but sampling anti-aliased letter edges can give a different value from the specified text color. Thin fonts can also look weaker than their mathematical result suggests.

Decide Which Text Category Applies

WCAG 2.2's minimum text-contrast requirement is at least 4.5:1 for normal text and 3:1 for large text. Large text means at least 18 point, or at least 14 point bold; equivalent sizes in other writing systems need the same attention to how the text is rendered.

In common CSS conversions, those sizes are 24 pixels and about 18.7 pixels respectively. Do not treat a 16-pixel label as large simply because it uses uppercase letters or looks prominent on the page.

The enhanced, AAA requirement is at least 7:1 for normal text and 4.5:1 for large text. Choose the standard you are checking before interpreting a result. Passing AA for a large heading does not mean the same colors pass for body copy.

These are text-contrast criteria, not a complete accessibility assessment. Controls, focus indicators, keyboard use, labels and other parts of the page have their own requirements.

Measure The Ratio, Then Read It Correctly

Contrast is based on the relative luminance of the lighter and darker colors. Its ratio ranges from 1:1 for identical colors to 21:1 for black and white. Hue alone does not decide the result; two different-looking colors can still have similar luminance.

Enter the text color and background color, then read the result for the correct text category. A ratio of 3.5:1 can meet the minimum requirement for large text while failing for normal text. That is useful information about where the pairing belongs, not an inconsistent result.

Do not round a failing result up to a pass. W3C explicitly notes that 4.499:1 does not meet a 4.5:1 threshold. Leave a little room above the threshold when possible, then inspect the real page as well.

There are specific exceptions, including incidental text and text that forms part of a logo. Do not extend those exceptions to navigation, ordinary labels or body copy simply because changing their colors would be inconvenient.

Fix A Pair Without Reworking Everything

Try darkening the text or lightening its background first. Make a small change, measure again and inspect the result in the real component. Changing both colors at once makes it harder to tell which adjustment helped.

If the brand accent fails for small text, keep it in an illustration or another suitable role and use a stronger text color for the label. A brand palette does not require every color to perform every job.

For text over an image, consider an opaque panel or another design treatment that provides a stable background. A pairing measured against one part of a photograph is not enough if the layout moves the words over a different area on mobile.

Check links in their full context. Contrast against the background is one question; whether a visitor can distinguish the link from surrounding text is another. An underline can supply a cue beyond color, but it does not excuse unreadable link text.

Review The Whole Component

After adjusting a color, check the default, hover, focus, selected and error states that are relevant. Test on the narrow layout too. Resizing can move text onto another background or reduce the space around a label.

Keep a short record of the color pair, ratio, text category and date checked. A result such as "4.8:1, normal text, AA" is clearer than a bare "accessible" label. It says what you measured without claiming that the entire page passes every accessibility requirement.

Read the finished component at its intended size. If the font is unusually thin or the background busy, a passing number can still leave room to improve readability. The purpose of the check is to help people read the page, not to stop thinking once a badge turns green.

Want to check a color pair while you edit? Try the Contrast Checker to compare its AA and AAA results for normal and large text.