Link Color Contrast Checker

Link colour contrast refers to the visual distinguishability of hyperlinks from both the background they sit on and the surrounding body text, as measured by the WCAG 2.1 contrast ratio formula. Unlike standard text contrast checking, link colour evaluation involves two distinct checks: the link must have sufficient contrast against the background (standard SC 1.4.3), AND the link colour must have at least 3:1 contrast against the surrounding body text colour (SC 1.4.1 Use of Color). This dual requirement exists because users need to identify links even if they cannot perceive differences in hue - for example, users with protanopia (red-blindness) may not be able to distinguish a blue link from dark grey body text if the luminance difference is too small. Our browser-based link colour contrast checker evaluates both criteria simultaneously, providing a comprehensive pass/fail assessment with actionable suggestions.

1. Enter Your Three Colours: Type HEX or RGB values (or use the colour picker) for the link colour, body text colour, and background colour. The live preview area shows exactly how your colours will look together with a sample paragraph containing an inline link.
2. Instant Dual-Axis Calculation: The tool computes the WCAG 2.1 relative luminance for each colour and calculates three contrast ratios: link-vs-background, link-vs-body-text, and body-text-vs-background. All calculations use the standard WCAG formula and run entirely in your browser.
3. Review Results & Fix Issues: The results panel shows pass/fail status for each criterion with ratio bars, a detailed compliance table, and a list of specific issues with actionable suggestions. Use the "Copy Report" button to export the results for documentation.

• SC 1.4.1 - Use of Color (Level AA): Colour must not be the only visual means of conveying information. For links identified by colour alone, the link colour must have at least 3:1 contrast ratio against the surrounding body text colour. This ensures users can distinguish links even if they cannot differentiate hues. Adding underlines, icons, or other non-colour indicators is recommended.
• SC 1.4.3 - Contrast Minimum (Level AA): Link text (as with all text) must have at least 4.5:1 contrast against backgrounds for normal text and 3:1 for large text (≥18pt or ≥14pt bold). This applies to the link colour against the background colour.
• SC 1.4.11 - Non-text Contrast (Level AA): If links use underlines, borders, or other non-text indicators, those indicators must have at least 3:1 contrast against the background. This applies to the visual boundary of any interactive link element.

While the link color contrast checker evaluates mathematical contrast ratios, true link accessibility involves more than just colour:

• Don't rely on colour alone: Always pair colour with underlines, icons, bold weight, or other non-colour indicators. WCAG SC 1.4.1 explicitly requires this - colour-only link identification fails the criterion even if contrast ratios are sufficient.
• Consider all link states: Default, visited, hover, focus, and active states each have different colours. Each state should independently pass contrast checks against both background and body text.
• Test with colour vision deficiency simulations: A colour combination that passes contrast checks may still be indistinguishable to users with certain types of colour blindness. Use colour blindness simulators to verify link distinguishability.
• Provide descriptive link text: Even with perfect contrast, "click here" and "read more" links are inaccessible to screen reader users. Use descriptive link text that makes sense out of context.