E-mail List Archives
Thread: FW: non-underlined link - will bolding meet contrast requirement?
Number of posts in this thread: 11 (In chronological order)
From: Joseph Sherman
Date: Wed, Jun 22 2016 1:25PM
Subject: FW: non-underlined link - will bolding meet contrast requirement?
No previous message | Next message →
Forwarding for a colleague:
Hello,
I'm working with someone who has an externally-imposed stylesheet that has non-underlined links. These links do not meet the color contrast guidelines for non-underlined links<https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_blog_wcag-2D2-2D0-2Dand-2Dlink-2Dcolors_&d=CwMFAg&c=mRWFL96tuqj9V0Jjj4h40ddo0XsmttALwKjAEOCyUjY&r=NS7sMOEYVINwm3e4REboGQG-NnI841o0NWYqtIwWJ4U&m=P2vQSSDkXItr07tVBAKy_srbkrW6ORI9SU4DYjvt-3Y&s=CwjT4vpxlSY2q93bB2Jm2yltudtKKF4AiR-G6OgCjrM&e=>. The workaround this person uses is to bold the links since it is not currently possible to change the stylesheet to allow underlines. (Though I do believe the link will underline on focus)
Will bolding the links suffice for meeting the guidelines? (i.e., can we substitute bolding for underlines and not need to worry about the more stringent color contrast guidelines for non-underlined links?)
Thanks,
Vanessa
p.s. Along those same lines, I'm unclear on the relationship between bolding and color contrast. If foreground and background colors do not pass using the contrast checker, does bolding make any difference in the contrast assessment?
Vanessa Preast, Ph.D. DVM
Digital Accessibility & Instructional Specialist
Des Moines University
Center for Teaching and Learning
3200 Grand Avenue
Des Moines, IA 50312
515.271.1535
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
From: Caitlin Geier
Date: Wed, Jun 22 2016 1:40PM
Subject: Re: FW: non-underlined link - will bolding meet contrast requirement?
← Previous message | Next message →
Hi Vanessa,
I just learned about this myself. :) It is *technically* accessible to use
bold to denote a link within surrounding text. You're not beholden to the
link color contrast guidelines if you use any other visual signifier to
differentiate links from body text. That being said, it's not particularly
usable, as bolded text could be used elsewhere in paragraph text. A user
who can't distinguish the contrast may not be able to tell the difference
between a link and regular bolded text.
As far as I know, bolding doesn't make any difference when assessing color
contrast. The guidelines only talk about font size (in pixels).
-Caitlin
On Wed, Jun 22, 2016 at 3:25 PM, Joseph Sherman < = EMAIL ADDRESS REMOVED = >
wrote:
> Forwarding for a colleague:
>
> Hello,
>
> I'm working with someone who has an externally-imposed stylesheet that has
> non-underlined links. These links do not meet the color contrast guidelines
> for non-underlined links<
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_blog_wcag-2D2-2D0-2Dand-2Dlink-2Dcolors_&d=CwMFAg&c=mRWFL96tuqj9V0Jjj4h40ddo0XsmttALwKjAEOCyUjY&r=NS7sMOEYVINwm3e4REboGQG-NnI841o0NWYqtIwWJ4U&m=P2vQSSDkXItr07tVBAKy_srbkrW6ORI9SU4DYjvt-3Y&s=CwjT4vpxlSY2q93bB2Jm2yltudtKKF4AiR-G6OgCjrM&e=>.
> The workaround this person uses is to bold the links since it is not
> currently possible to change the stylesheet to allow underlines. (Though I
> do believe the link will underline on focus)
>
> Will bolding the links suffice for meeting the guidelines? (i.e., can we
> substitute bolding for underlines and not need to worry about the more
> stringent color contrast guidelines for non-underlined links?)
>
> Thanks,
> Vanessa
>
> p.s. Along those same lines, I'm unclear on the relationship between
> bolding and color contrast. If foreground and background colors do not pass
> using the contrast checker, does bolding make any difference in the
> contrast assessment?
>
>
> Vanessa Preast, Ph.D. DVM
> Digital Accessibility & Instructional Specialist
>
> Des Moines University
> Center for Teaching and Learning
> 3200 Grand Avenue
> Des Moines, IA 50312
>
> 515.271.1535
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> > > > >
--
Caitlin Geier
User Experience Designer
= EMAIL ADDRESS REMOVED =
From: Thad C
Date: Wed, Jun 22 2016 1:46PM
Subject: Re: FW: non-underlined link - will bolding meet contrast requirement?
← Previous message | Next message →
In some cases making a font bold can increase contrast. The tool in the
link below, as well as other tools, can help demonstrate this:
http://leaverou.github.io/contrast-ratio/
Best,
Thaddeus
Hi Vanessa,
I just learned about this myself. :) It is *technically* accessible to use
bold to denote a link within surrounding text. You're not beholden to the
link color contrast guidelines if you use any other visual signifier to
differentiate links from body text. That being said, it's not particularly
usable, as bolded text could be used elsewhere in paragraph text. A user
who can't distinguish the contrast may not be able to tell the difference
between a link and regular bolded text.
As far as I know, bolding doesn't make any difference when assessing color
contrast. The guidelines only talk about font size (in pixels).
-Caitlin
On Wed, Jun 22, 2016 at 3:25 PM, Joseph Sherman < = EMAIL ADDRESS REMOVED = >
wrote:
> Forwarding for a colleague:
>
> Hello,
>
> I'm working with someone who has an externally-imposed stylesheet that has
> non-underlined links. These links do not meet the color contrast
guidelines
> for non-underlined links<
>
https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_blog_wcag-2D2-2D0-2Dand-2Dlink-2Dcolors_&d=CwMFAg&c=mRWFL96tuqj9V0Jjj4h40ddo0XsmttALwKjAEOCyUjY&r=NS7sMOEYVINwm3e4REboGQG-NnI841o0NWYqtIwWJ4U&m=P2vQSSDkXItr07tVBAKy_srbkrW6ORI9SU4DYjvt-3Y&s=CwjT4vpxlSY2q93bB2Jm2yltudtKKF4AiR-G6OgCjrM&e>.
> The workaround this person uses is to bold the links since it is not
> currently possible to change the stylesheet to allow underlines. (Though I
> do believe the link will underline on focus)
>
> Will bolding the links suffice for meeting the guidelines? (i.e., can we
> substitute bolding for underlines and not need to worry about the more
> stringent color contrast guidelines for non-underlined links?)
>
> Thanks,
> Vanessa
>
> p.s. Along those same lines, I'm unclear on the relationship between
> bolding and color contrast. If foreground and background colors do not
pass
> using the contrast checker, does bolding make any difference in the
> contrast assessment?
>
>
> Vanessa Preast, Ph.D. DVM
> Digital Accessibility & Instructional Specialist
>
> Des Moines University
> Center for Teaching and Learning
> 3200 Grand Avenue
> Des Moines, IA 50312
>
> 515.271.1535
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> > > > >
--
Caitlin Geier
User Experience Designer
= EMAIL ADDRESS REMOVED =
From: Jared Smith
Date: Wed, Jun 22 2016 1:57PM
Subject: Re: FW: non-underlined link - will bolding meet contrast requirement?
← Previous message | Next message →
If the links are made bold, then they are no longer relying solely on
color to differentiate them from non-link text. Now bold is generally
less discernible than underline, and as Caitlin noted, bold can also
be used for emphasized text. While not optimal, I believe that bold
text (especially if used with sufficient contrast differences) would
be sufficient to meet the WCAG requirement for not relying on color
alone.
Bold text does not change the contrast ratio. WCAG does have a lower
foreground-to-background ratio threshold for text that is 14 point and
bold or larger, but this would not be applicable to the contrast
requirement (3:1 ratio) for links vs. surrounding text for
non-underlined links.
Jared
From: Thad C
Date: Wed, Jun 22 2016 2:02PM
Subject: Re: FW: non-underlined link - will bolding meet contrast requirement?
← Previous message | Next message →
I definitely defer to Jared on this. Sorry if my statement indicating that
making a font bold may, in some cases, increase contrast was missleading
.... always learning.
Thaddeus
On Jun 22, 2016 12:57 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
> If the links are made bold, then they are no longer relying solely on
> color to differentiate them from non-link text. Now bold is generally
> less discernible than underline, and as Caitlin noted, bold can also
> be used for emphasized text. While not optimal, I believe that bold
> text (especially if used with sufficient contrast differences) would
> be sufficient to meet the WCAG requirement for not relying on color
> alone.
>
> Bold text does not change the contrast ratio. WCAG does have a lower
> foreground-to-background ratio threshold for text that is 14 point and
> bold or larger, but this would not be applicable to the contrast
> requirement (3:1 ratio) for links vs. surrounding text for
> non-underlined links.
>
> Jared
> > > > >
From: Jared Smith
Date: Wed, Jun 22 2016 2:31PM
Subject: Re: FW: non-underlined link - will bolding meet contrast requirement?
← Previous message | Next message →
Thad -
You're statement is correct - making something bold does increase it's
relative visible contrast - but it does not change the contrast ratio
as determined by WCAG.
Jared
On Wed, Jun 22, 2016 at 2:02 PM, Thad C < = EMAIL ADDRESS REMOVED = > wrote:
> I definitely defer to Jared on this. Sorry if my statement indicating that
> making a font bold may, in some cases, increase contrast was missleading
> .... always learning.
>
> Thaddeus
> On Jun 22, 2016 12:57 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
>
>> If the links are made bold, then they are no longer relying solely on
>> color to differentiate them from non-link text. Now bold is generally
>> less discernible than underline, and as Caitlin noted, bold can also
>> be used for emphasized text. While not optimal, I believe that bold
>> text (especially if used with sufficient contrast differences) would
>> be sufficient to meet the WCAG requirement for not relying on color
>> alone.
>>
>> Bold text does not change the contrast ratio. WCAG does have a lower
>> foreground-to-background ratio threshold for text that is 14 point and
>> bold or larger, but this would not be applicable to the contrast
>> requirement (3:1 ratio) for links vs. surrounding text for
>> non-underlined links.
>>
>> Jared
>> >> >> >> >>
> > > >
From: Snahendu Bhattacharya
Date: Wed, Jun 22 2016 2:45PM
Subject: Re: FW: non-underlined link - will bolding meet contrast requirement?
← Previous message | Next message →
Hi Jared!
Trying to think from another perspective, if the links are made bold, won't
it affect the screen reader reading tone or pitch?
If the purpose of the implementation is 'to rectify the color contrast', I
think that might not work.
But if we are trying to address 'additional non color differentiator',
bold, italic, underline, different font family, font styling all should
work. Though I prefer 'underline' from every perspective.
On Jun 22, 2016 4:31 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
> Thad -
>
> You're statement is correct - making something bold does increase it's
> relative visible contrast - but it does not change the contrast ratio
> as determined by WCAG.
>
> Jared
>
>
> On Wed, Jun 22, 2016 at 2:02 PM, Thad C < = EMAIL ADDRESS REMOVED = >
> wrote:
> > I definitely defer to Jared on this. Sorry if my statement indicating
> that
> > making a font bold may, in some cases, increase contrast was missleading
> > .... always learning.
> >
> > Thaddeus
> > On Jun 22, 2016 12:57 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> If the links are made bold, then they are no longer relying solely on
> >> color to differentiate them from non-link text. Now bold is generally
> >> less discernible than underline, and as Caitlin noted, bold can also
> >> be used for emphasized text. While not optimal, I believe that bold
> >> text (especially if used with sufficient contrast differences) would
> >> be sufficient to meet the WCAG requirement for not relying on color
> >> alone.
> >>
> >> Bold text does not change the contrast ratio. WCAG does have a lower
> >> foreground-to-background ratio threshold for text that is 14 point and
> >> bold or larger, but this would not be applicable to the contrast
> >> requirement (3:1 ratio) for links vs. surrounding text for
> >> non-underlined links.
> >>
> >> Jared
> >> > >> > >> > >> > >>
> > > > > > > > > > > > >
From: Jonathan Avila
Date: Wed, Jun 22 2016 3:42PM
Subject: Re: FW: non-underlined link - will bolding meet contrastrequirement?
← Previous message | Next message →
> You're statement is correct - making something bold does increase it's relative visible contrast - but it does not change the contrast ratio as determined by WCAG.
Bold text that is 14point through 17 point is the exception to this statement. That is -- bold text that is 14pt or larger has a lesser contrast ratio than non-bold text less than 18 pt according to WCAG 2. It doesn't guarantee it can be read by people with low vision or color deficiencies though.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART GroupÂ
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!
From: Birkir R. Gunnarsson
Date: Thu, Jun 23 2016 12:51AM
Subject: Re: FW: non-underlined link - will bolding meet contrast requirement?
← Previous message | Next message →
Ok, a few points of clarification (as always, feel free to correct me
if I am mistaken anywhere):
There are two different WCAG SC at play here:
1.4.1 talks about being able to distinguish links from surrounding
text (only when links are embedded in a block of text). Bolding the
link text here suffices to distinguish the link from the surrounding
text, so the 3 to 1 color contrast of link text vs. surrounding text
no longer applies. As pointed out this technically passes, though it
is not optimal.
1.4.3 talks about contrast ratio of text to background. Bolding the
link text reduces the 4.5:1 requirement to 3:1, but it still has to be
met.
Visual formatting does not affect screen readers when done via CSS.
If html text-level semantic elements such as <I>, <b>, <em> and
<strong> elements are used to do this, it could technically affect
screen readers. But in reality most screen readers are not affected as
they do nothing with these elements, something that will hopefully
change. See test page for some of these at:
http://whoseline.a11yideas.com/01_semanticTextElements.html
On 6/22/16, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> You're statement is correct - making something bold does increase it's
>> relative visible contrast - but it does not change the contrast ratio as
>> determined by WCAG.
>
> Bold text that is 14point through 17 point is the exception to this
> statement. That is -- bold text that is 14pt or larger has a lesser
> contrast ratio than non-bold text less than 18 pt according to WCAG 2. It
> doesn't guarantee it can be read by people with low vision or color
> deficiencies though.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
>
> Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> Check out our Digital Accessibility Webinars!
>
>
>
From: Swift, Daniel P.
Date: Thu, Jun 23 2016 6:35AM
Subject: Re: FW: non-underlined link - will bolding meet contrastrequirement?
← Previous message | Next message →
I'm assuming that your colleague is unable to edit the source in that particular block? Inline styling would override the styles imposed by the external stylesheet. Alternatively, adding a second stylesheet (obviously not desirable) with higher specificity for links would also override the style. To me, this seems like a more appropriate solution (if possible).
-Dan
From: Ryan E. Benson
Date: Thu, Jun 23 2016 7:17AM
Subject: Re: FW: non-underlined link - will bolding meet contrast requirement?
← Previous message | No next message
This was my thought too. If you can wrap the anchor in a bold tag, why
can't you just add in like text-decoration: underline; to an anchor or a
span?
Ryan E. Benson
On Jun 23, 2016 08:36, "Swift, Daniel P." < = EMAIL ADDRESS REMOVED = > wrote:
> I'm assuming that your colleague is unable to edit the source in that
> particular block? Inline styling would override the styles imposed by the
> external stylesheet. Alternatively, adding a second stylesheet (obviously
> not desirable) with higher specificity for links would also override the
> style. To me, this seems like a more appropriate solution (if possible).
>
> -Dan
>
>