I'm trying to get clarification on contrast required for html link underline color. I'm using the Wave tool to check for issues and I've encountered something that, intuitively, should produce an error but does not.
If I use the css property text-decoration-color
on an HTML A
(link) element and make the link color: black;
, I can use any text-decoration-color and it passes contrast ratio for any color on WAVE tool. This includes contrast compliance with a text-decoration-color: white;
.
This is a code example with white underline and black text.
a
{
color: black;
text-decoration: underline;
text-decoration-color: #ffffff;
-webkit-text-decoration-color: #ffffff;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
Below is an example of a link-underline-color which fails regular contrast ratio.
a
{
color: black;
text-decoration: underline;
text-decoration-color: #FAFAFA;
-webkit-text-decoration-color: #FAFAFA;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
I have read some documentation on this and I could find a page on MDN which states
"It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page."
So my question... does the WAVE tool not sufficiently test for link-underline-color
or is any color sufficient?