WebAIM - Web Accessibility In Mind

E-mail List Archives

Color contrast ratio for text highlights

for

From: Sun Lee
Date: Dec 12, 2014 6:52PM

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