WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color contrast ratio for text highlights

for

From: Birkir R. Gunnarsson
Date: Dec 13, 2014 6:29AM

Interesting question.
What about SC 1.4.1, color as information?
The information is that the text is highlighted.
The requirement is a color contrast of at least 3:1 with surrounding text.
I think that is probably more relevant to this problem than if the
highlighted text satisfied 1.4.3 (at least as long as the color
contrast is accessible when the page loads and nothing is highlighted
by default).
The way you describe it, it sounds like 1.4.1 is definitely met
already since the color of the highlighted text and background sounds
vastly different.

Could you offer any alternate visual styling for those who may need a
more accessible highlighting?
Something like changing the format of the highlighted text (wrap it in
a stron or em tags once selected, that would even theoretically work
with screen readers as well, though they have not been very good at
offering users ways of detecting this kind of markup), provide visual
underlining of some sort, or provide a color combination for the
highlighted text that may not look as nice but would meet the 4.5:1
ratio?
This is the best a blind man can do for possible suggestions, though
the problem sounds highly interesting to me.
Hope others will weigh in and you will end up with an example of how
to make highlighted text accessible.
Cheers
-B


On 12/12/14, Sun Lee < <EMAIL REMOVED> > wrote:
> Hi everyone,
>
> A web app that I'm working on provides the ability to see highlights on top
> of text. To do this, we apply color with an opacity overlay on top of the
> text. When we apply the highlight, the color of the text and the
> background both change because of the color overlay. Here's an example:
> http://cl.ly/image/1j2I1n3q1o25
>
> Does the minimum contrast ratio of 4.5:1 apply for highlighted text? The
> highlights can be turned on/off, at which point, it's just a white
> background with black text.
>
> Sometimes two different-colored highlights are overlapped on top of each
> other creating a different mixed color. Would the new color also need to
> have a text to background ratio of 4.5:1?
>
> And, if the highlighted text violates SC 1.4.3, do you have any suggestions
> on how to make text highlights accessible?
>
> I would really appreciate your help on this! Thanks!
>
> -Sun
> > > >


--
Work hard. Have fun. Make history.