E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Sun Lee
Date: Fri, Dec 12 2014 6:52PM
Subject: Color contrast ratio for text highlights
No previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Sat, Dec 13 2014 6:29AM
Subject: Re: Color contrast ratio for text highlights
← Previous message | Next message →

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 ADDRESS 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.

From: Whitney Quesenbery
Date: Sun, Dec 14 2014 10:49AM
Subject: Re: Color contrast ratio for text highlights
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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.
> > > >