Skip to content

Instantly share code, notes, and snippets.

@Myndex
Created June 21, 2022 15:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Myndex/a20824f3d4e6ad9da866f18404aa588a to your computer and use it in GitHub Desktop.
Save Myndex/a20824f3d4e6ad9da866f18404aa588a to your computer and use it in GitHub Desktop.
Busy Background Breaks Bulletin

Busy Background Breaks Bulletin

  • Question: With text overlapping a picture of a person with a black-and-white-striped shirt. No matter what fixed "color value" you choose or what system you express it in (RGBA, APCA, etc.), you're going to have some of your letterforms appear in an area of insufficient contrast. (e.g. if you choose a dark color, your letters won't be readable on top of the black shirt stripe and visa versa for a light color).

Spatially Simplifing Stressful Stripes

Funny you should mention this. One of the experiments that we use in the lab for determining the middle point of perceptual contrast, specifically involves putting text against stripes of black and white.

The spatial frequency, in other words the size of the stripes relative to the font, is substantially important. As is the overall size and weight of the font. If I understand what you are asking for — maximum contrast at any given point, the results may not be what you expect. Here are examples.

Text on B&W stripes, alternating text color

Alternating the text color is actually a non-starter. The guidance APCA states is to not put text over such a busy background!!

But what is it like if we pick a middle contrast? Against black and white on an sRGB monitor the middle is about #a6a6a6 or so. It looks like this:

Text on B&W stripes, middle contrast text color

Screen Shot 2021-11-09 at 11 46 55 PM

In this second example, if you allow your eye to rest on either a white or a black stripe for a moment you'll notice that the contrast is essentially equal for either the white or the black area. But when trying to view the entire image at once, we are unable to see past the very high contrast white and black stripes. Everything in perception is very context sensitive.

A few more examples.

Screen Shot 2021-11-09 at 8 17 03 PM

Even with a very large font, we have difficulty...

Screen Shot 2021-11-09 at 8 21 58 PM

What is needed is some help, like an outline or a shadow. Here a simple drop shadow helps make the text pop a bit more...

Screen Shot 2021-11-09 at 8 24 11 PM

We can even make the text white in this case, the shadow holding the background steady enough that we can see past the stripes.

COLOR

Screen Shot 2021-11-09 at 11 17 10 PM

Even a saturated color can not by itself negate the busy background. Shawdows are still needed.

Screen Shot 2021-11-09 at 11 17 20 PM

Screen Shot 2021-11-09 at 11 18 42 PM

White shadows can work with a darker text color as in here.

TL;DR

What I hoped to illustrate is that some automated contrast check over something like this is not a solution at all. It is bad practice to put any text over such an image, unless you add sufficient backing to keep a visual separation between the text and the busy background.

Shadows

A major issue is each browser renders the shadow differently, creating content consistency issues. And some modes shut off shadow so it is not a reliable source of contrast, more of an add-on only. Realistically, nothing really helps this use-case except lowering the background contrast so that it does not compete, and kind of more my point.

Screen Shot 2021-11-10 at 6 53 44 PM

Screen Shot 2021-11-10 at 6 57 26 PM

Best practices and guidelines are: reduce image contrast when it is to be used as a background for text.... massively reduce it in this case.

If you liked that, here's a link for deeper diving:

https://git.myndex.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment