- From: Andrew Somers via GitHub <sysbot+gh@w3.org>
- Date: Wed, 10 Nov 2021 08:34:25 +0000
- To: public-css-archive@w3.org
Hi Brent @bkimmel > .... _APCA _doesn't_ solve the core problem proposed here of, e.g. some 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)._ 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 <img width="560" src="https://user-images.githubusercontent.com/42009457/141074795-fa4ab115-bbbd-4ce4-a998-76453042b6e2.png"> 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 <img width="560" alt="Screen Shot 2021-11-09 at 11 46 55 PM" src="https://user-images.githubusercontent.com/42009457/141075461-4f443d3b-44e4-4be9-99aa-498c5a8d474b.png"> 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. <img width="585" alt="Screen Shot 2021-11-09 at 8 17 03 PM" src="https://user-images.githubusercontent.com/42009457/141076419-84795067-d966-4b6d-bf3b-e352e5606829.png"> Even with a very large font, we have difficulty... <img width="566" alt="Screen Shot 2021-11-09 at 8 21 58 PM" src="https://user-images.githubusercontent.com/42009457/141076401-8962b450-cbff-4228-b1cd-2a5a2f27710d.png"> 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... <img width="566" alt="Screen Shot 2021-11-09 at 8 24 11 PM" src="https://user-images.githubusercontent.com/42009457/141076685-75628bf5-7640-4802-be07-3b5b8d84080e.png"> 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 <img width="566" alt="Screen Shot 2021-11-09 at 11 17 10 PM" src="https://user-images.githubusercontent.com/42009457/141076873-b6288975-455d-4e85-b07c-b5718d73f7df.png"> Even a saturated color can not by itself negate the busy background. Shawdows are still needed. <img width="566" alt="Screen Shot 2021-11-09 at 11 17 20 PM" src="https://user-images.githubusercontent.com/42009457/141076870-1a2cc726-7397-498f-8563-7089737d03b2.png"> <img width="566" alt="Screen Shot 2021-11-09 at 11 18 42 PM" src="https://user-images.githubusercontent.com/42009457/141076866-2f2c7ee5-7be5-4d60-936c-33ad8e2ce59c.png"> 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. Thank you Andy -- GitHub Notification of comment by Myndex Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6305#issuecomment-964897256 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 10 November 2021 08:34:27 UTC