Blog

How to find a suitable link color for an accessibility audit

Sample the link and background colors, check WCAG contrast targets, and choose a color that stays clear in light and dark themes.

Rachel BennettTools and utilities Tools 4 min read

A link can look clear on your screen and still be hard to read for someone with low vision. In an accessibility audit, you need to check the link color against the background, then make sure people can recognize links without relying on color alone.

The Color Picker samples colors from your screen and reports HEX, RGB, and HSL values. It does not calculate contrast, so use it to get the colors you need, then compare them with your team’s contrast checker or audit method.

Sample and check the link color

  1. Open the Color Picker in Chrome or Edge on a computer. These browsers support picking a color from anywhere on the screen. Other browsers may offer a reduced version or no screen picking.
  2. Open the page you are auditing and sample a solid part of the link text, away from the antialiased edges. Record the HEX value and note the link state, such as normal, visited, hover, or focus.
  3. Sample the background immediately behind the text. Record that HEX value too. If the text is on an image, gradient, or transparent panel, sample the lightest and darkest areas behind it.
  4. Compare the text and background in a contrast checker or your audit workflow. For WCAG AA, ordinary text needs a contrast ratio of at least 4.5:1. Large text needs at least 3:1.
  5. Repeat the check for each theme and link state you support. A link can pass in light mode but fail in dark mode, or become difficult to see when focused.

The picker gives you the color values shown on screen, not an accessibility verdict. For the WCAG definitions and exceptions, see the W3C explanation of contrast minimum.

What the result means

The ratio is at least 4.5:1

The link meets the WCAG AA contrast minimum for ordinary text against that background. This is a useful pass for the color pair, but it does not confirm that the link is easy to find or that every link state passes. Check the underline or other visual cue, then test visited, hover, and keyboard focus states too.

The ratio is 3:1 to less than 4.5:1

This may be enough for large text, which generally means at least 24 CSS pixels tall, or at least about 19 CSS pixels when bold. It does not meet the AA contrast minimum for ordinary link text. If the link is normal body text, darken it on a light background or lighten it on a dark background, then check again.

The ratio is below 3:1

The color pair falls below the AA minimum even for large text. Choose a more contrasting link color or change the background behind it. If a photo, gradient, or translucent layer causes the variation, test the weakest point rather than a convenient spot.

The contrast passes, but links are hard to spot

Contrast against the background and distinction from surrounding text are separate questions. A link that differs from nearby body text only by color can be missed by people who cannot distinguish those colors. An underline or another persistent visual marker makes the link recognizable without color alone.

Improve a link color that fails

  1. Add an underline or another clear cue. Keep links visibly different from regular text even when someone cannot perceive the color difference. This improves identification, but it does not fix a failed text-to-background contrast ratio.
  2. Adjust the color’s lightness. On a white or pale background, try a darker version of the link color. On a dark background, try a lighter version. The picker’s HSL value can help you compare lightness, but always recheck the contrast ratio after changing a color.
  3. Check every link state. Test normal, visited, hover, and focus appearances. Do not let a hover or focus style make the text blend into its background. Also check the keyboard focus indicator separately, because it has its own visibility and contrast requirements.
  4. Use separate colors for separate themes. A single brand color may not contrast well on both light and dark backgrounds. Set a suitable link color for each theme instead of forcing one value everywhere.
  5. Change the background if color alone cannot solve it. Put a solid, sufficiently contrasting surface behind text on busy imagery, or adjust the image or overlay. Then sample and test the final rendered page again.

Avoid misleading color samples

Text edges contain blended pixels because the browser smooths letters against the background. Sampling an edge can give you a color that is neither the intended text color nor the background color. Pick from the middle of a thicker part of a letter, and compare the result with the actual design color in your styles or design system when available.

If the background is a photo or gradient, one sample is not enough. Check more than one point behind the link, especially where the background is closest in brightness to the text. For translucent text or backgrounds, sample the rendered page rather than assuming the original color values describe the final combination.

Keep the sampled HEX values, theme, link state, and tested ratio together in your audit notes so someone else can repeat the check.

More articles