Developer guide

How to Check Link Color Contrast

Review link text against its background and distinguish links without relying on color alone.

Short answer

Links must be readable against their background and should not rely on color alone to communicate that they are links.

When this applies

The link color needs an appropriate contrast ratio against its background. When links appear in body text, use another visual cue such as an underline or a non-color distinction.

Practical review steps

  1. Check the default and visited link colors against the page surface.
  2. Keep a persistent non-color cue for inline links where needed.
  3. Review hover and focus styles, not just the resting state.

Check the actual color pair

Use the free Contrast Check with the foreground and background colors from the real component. It provides an immediate AA and AAA ratio check in the current browser tab.

Source and limit

For the formal requirement, review W3C's WCAG contrast minimum guidance. A ratio result checks a color pair; it is not a complete accessibility audit.