WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color contrast ratio for text highlights

for

From: Whitney Quesenbery
Date: Dec 14, 2014 10:49AM

If the highlights have meaning, then they are part of the normal reading
experience and should meet contrast requirements.

Adjust the opacity or experiment with colors that work in combination, or
make the color a background color instead, so it doesn't change the text
color. I don't know how you are doing it technically, but maybe you need a
different coding approach.



On Sat, Dec 13, 2014 at 8:29 AM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:
>
> 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.
> > > >