Do not mark links by color alone
This one is a documented failure rather than a fix, so a page that matches it has a defect. F73 describes links inside running text that are told apart from the words around them by color and nothing else, and W3C files it against 1.4.1 Use of Color at Level A. The scope is narrower than people assume. W3C makes the point twice. Navigation links are usually obvious from where they sit and how the page is built. Links buried in a paragraph are not, which is why the failure is written about those. An underline is the cue everybody reaches for and it is not the only one W3C accepts. Bold, italics and a difference in lightness are all on its list. Take the lightness route and the difference has to reach 3:1, with technique G183 adding a further cue on hover and on focus. There is also a limit here that protects you. Nothing asks a link to be findable by somebody who cannot perceive color if it is not findable by somebody who can.
How we find it in an audit
The quick version is viewing the page in grayscale, where anything that stops being findable was a color-only signal. That check has a blind spot worth saying out loud, because grayscale flattens hue and lightness together, so a link passing on a 3:1 lightness difference will look like a failure in it. That is why we measure rather than eyeball. Paragraph links get their computed color read against the body text color. The ones that fail get screenshotted in color and in grayscale, side by side, since that pair makes the finding argue itself.
How affected users experience it
This lands on readers with color vision deficiency and on people with low vision, not on blind users. For them a color-only link is not styled differently at all, so the affordance is simply absent. They are reading a paragraph in which some of the words are secretly doors. The everyday version of the same problem is a bright screen outdoors, where the color difference the design leans on washes out for everyone.
Passes vs. fails
Passes
p { color: #333333 }
p a { color: #2050c7; text-decoration: underline }Fails
p { color: #333333 }
p a { color: #2050c7; text-decoration: none }The other techniques filed under this rule
9 guides on this site are filed under 1.4.1 Use of Color. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
- G14sufficientSay in text what color alone signals
- G111sufficientPair color coding with patterns and shapes
- G182sufficientBack up color-coded text with another cue
- G183sufficientMake color-only links contrast and respond
- G205sufficientAdd text cues to color-coded field labels
- C15advisoryStyle the focus indicator instead of removing it
This guide is our interpretation of W3C technique F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.