interpreting non-text contrast for isometric illustrations

[mbgower]

We'd like to get some clarity on how to interpret the 3:1 contrast requirements when illustrations involve an abstracted 3-dimensional representation.
Given the shading on various planes in such an object, it is unlikely many will achieve 3:1 between the primary plane and the secondary plane, the primary plane and the background, and the secondary plan and the background.
Our main interpretation so far has been that the non-text-contrast requirement only needs to come into consideration where the parts of an object convey enough separate meaning that a single ALT for the object does not properly convey any composite information being conveyed (i.e., an image showing the path through a maze, where not only the maze shape but the path through it is meaningful).
In other words, an isometric drawing of a house, which is only representative of a house, just needs to meet 3:1 with the object and its background.
However, if the house is a layered floor plan, then each of the levels and the rooms drawn are to an extent individually meaningful. But how is it possible to meet Non-Text Contrast for each of the 'meaningful' pieces, as explained in the Understanding document:

only those that are required for a user to understand what the graphic is conveying

I will provide some examples to help illustrate.

[Myndex]

Hi @mbgower
Contrast is a big discussion at the moment. 3:1 is really easy to achieve, and any traditional drafted plan can meet it without too much effort, but perhaps I am misunderstand your question?

[mbgower]

I have a request out to the designer I was working with for some optimal examples. In the meantime, let me give some better context for isometric illustrations. (Sighted users can do a search of the term and see some random examples.)
They are stylized 3-D illustrations. Without some level of visual contrast in the planes, it is very difficult to realize a 3-D object in two dimensions. And of course the more complex an object the more planes it may have. So it rapidly becomes difficult to achieve 3:1 contrast between the various elements.

Decorative

Some of these illustrations can just be considered decorative; they don't convey important information. The best way to verify something being decorative is to simply remove the illustration and ask if information on the page has meaningfully changed. If the answer is "no", such an illustration doesn't need to conform to 3:1 with its background because it doesn't meet the second bullet of the SC:

Parts of graphics required to understand the content

I think that case is relatively easy to determine.

Outline

Another illustration may be important as an object but the details of the object are not important. For example, if a generic house is the only thing that is important, such an object may be understandable with just the periphery meeting 3:1 against the background.

Cutaways and other complex illustrations

Where it gets messy is trying to come up with isometric illustrations that convey meaningful detail while meeting a 3:1 ratio between all the elements which are importance to the concept. Think of a cutaway illustration of a building or ship. It arguably needs to be 3-d to make the shapes inside understandable.
It may be possible to convey some key takeaway in text, and thus reduce the graphical elements that are required in order to understand. But it is unclear to me how we can consistently interpret when such illustrations can be considered to have attained appropriate equivalent information in text.
It is also very unclear to me if it is possible for any two people to agree with such rich illustrations what parts are considered essential for understanding.

Obviously specific illustrations will help enlighten discussion, so I will nudge the designer to get me some images to share.

[Myndex]

Hi @mbgower I am woking on new contrast assessment methods and math (in issue 695) I don't believe there is anything that talks about "inner image" contrasts, so would love to see what youre talking about.

[mbgower]

Have a look at the graphical objects section of the Understanding document. It covers a few things where the parts of a complex object contrast with each other so they can be differentiated.

[mbgower]

Okay, so some examples.

First, we have a very basic 2-D head and shoulders sketch. The image combines a dark purple (or blue, depending on your colour balance) outline and some mauve details. There is also a very light mauve used as a highlight on the hair, face, shirt and collar. To me, this is simple to interpret for Non-text Contrast. Despite the fact the purple:mauve and mauve:light-mauve ratios all fail, the dark purple outline of the face and shoulders is clear against the white background (over 12:1 ratio), so users can discern what is being portrayed.
Typically a strong outline will solve most 2-D illustrations for non-text contrast requirements

[mbgower]

For example 2, I'm using an illustration with a similar color pallete, but it's 3-D.

The image shows a series of stackable modules (represented as cubes) surrounded by some illustrations that suggest a toolbox, a terminal console and a callout (amongst others things I would consider extraneous).
Here, the dark purple is used as the 'depth' plane for each of the boxes, and as a dropshadow on the 2-dimensional shapes (i.e., the surrounding illustrations) to give them a 3-D effect. It's also used to draw cogs on each of the second-level cubes.
The light-mauve colour shades the primary face of each cube as well as secondary details of some of the 2-d objects.
The mauve colour shades the top of the secondary cubes.
A fourth medium-dark mauve is used as a stylized opening in the tops of each of these secondary boxes, with the reverse effect on the large bottom cubes (darker top, lighter opening).
The medium-dark mauve has a 3.5:1 ratio against the background, a 2.7:1 ratio against the light-mauve, a 1.7:1 against the mauve and 2:1 against the dark mauve.
So of all the planes of the cubes, there is no situation where there is sufficient contrast between enough parts that a 'cube' shape is extractable. Some of the iconography --the gear on the cubes, the hammer on the toolbox and the main screen of the console -- can be differentiated sufficiently.

Whether such an image would be considered essential for the understanding of a page if up to the context. The same can be said for the parts of the image. It may be possible to add in outline to differentiate the boxes (there is actually a light stroke mark used to distinguish secondary planes from background matter on the cubes).
There's a ultra-dark mauve used very sparingly to give heavy shadow between a few objects, which is good enough to serve as the outline on all intersections. But I think most designer would balk at what that would do to the style of the illustration.

[awkawk]

Mike, I think that you are right that it is up to the context as to whether these are needed to understand the page content. Making the 3d image accessible, or even doing a thorough evaluation of it will be challenging. I think that most people will instead choose to provide redundant information so they can say that the image isn't needed to understand the content.

[Myndex]

Hi @mbgower

Non-text contrast says this:

Graphical objects do not have to meet the contrast requirements when "a particular presentation of graphics is essential to the information being conveyed". The Essential exception is intended to apply when there is no way of presenting the graphic with sufficient contrast without undermining the meaning.

I.e. it does not apply to an image like that.

Moreover, the image with boxes does not have any "fine detail."

Something that is not presently discussed in the standards, but that is highly relevant, is the SIZE of the symbol or text. Size is a far greater determiner of legibility than contrast. I am detailing this in issue 695

Above a certain size, increasing contrast has no helpful affect once a specific threshold level is met.

Below a certain size, no increase in contrast can override a visual acuity impairment.

Increasing contrast is only helpful for a range of sizes of small symbols or text. And excessive contrast decreases legibility.

[mbgower]

I was trying to find an example for the third one where each element is important, like a cutaway diagram Couldn't find a great one in the samples I have, but included this one which shows the components of a computer.

The diagram shows most of the components that go into a desktop computer:

• case
• lid
• screws
• cpu, with heatsink
• gpu
• ssd
• memory

In this very simple example, the palette choices do not always achieve decent contrast between neighbouring elements, but it's obvious that you can provide a text equivalent fairly easy, thus rendering the image redundant, as @awk points out.

And maybe that is the answer even for very complex cutaways and illustrations -- you may not cover all the rich detail in the image, or achieve 3:1 for everything, but generally speaking, the key points are incorporated into the text, whether the figcaption or in the surrounding body. My final example of this is the DK Eyewitness diagram of the Empire State Building, which gives the essence in its "Key" information that appears alongside as a set of numbered points (1-7 are visible here).

[mbgower]

@Myndex infers that illustrations meet the essential exception.
I think highly detailed drawings may be able to make a case for that -- the Empire State Building cutaway, that is attempting to replicate a physical object may be a case -- but I think overall an illustration shouldn't be able to seek out exception in the same way a photograph or reproduction does.

Many isometric illustration are of an abstract nature and if the artist began with an understanding they had to achieve a 3:1 ratio between key parts, I believe many illustrations could achieve that.
In example, the second example of all the cubes can achieve proper contrast if it was altered in its appearance as I suggest.

So I don't think "it's an illustration" can be an unqualified defense of the illustration being incomprehensible to someone with a colour deficiency or other need for decent relative luminence.

@alastc do you have any final thoughts for this?

[mbgower]

@Myndex

Moreover, the image with boxes does not have any "fine detail."

I'm not sure where a concept of "fine detail" comes from. The language in the SC talks about "Parts of graphics required to understand the content". To me, the gear icons on the cubes provide the context that these cubes aren't physical boxes; they're conceptual containers for widgets or services. If I couldn't distinguish the gear shape, what the cubes represent would not be as understandable.

[alastc]

@mbgower Final thoughts? Well, I think there will be some grey area, but a key factor seems to be information around these things.

I struggle to interpret the boxes example even though I can see it well, but with a key/text like the Empire State building example it wouldn't be an issue.

If someone really is relying on that type of illustration (only) to convey information, then I agree it should be covered. If that's too hard to do, then an alternative form would be the way to go.

[Myndex]

@Myndex

Moreover, the image with boxes does not have any "fine detail." Something that is not presently discussed in the standards, but that is highly relevant, is the SIZE of the symbol or text. Size is a far greater determiner of legibility than contrast. I am detailing this in issue 695 —
Above a certain size, increasing contrast has no helpful affect once a specific threshold level is met. Below a certain size, no increase in contrast can override a visual acuity impairment. Increasing contrast is only helpful for a range of sizes of small symbols or text. And excessive contrast decreases legibility.

I'm not sure where a concept of "fine detail" comes from. The language in the SC talks about "Parts of graphics required to understand the content". To me, the gear icons on the cubes provide the context that these cubes aren't physical boxes; they're conceptual containers for widgets or services. If I couldn't distinguish the gear shape, what the cubes represent would not be as understandable.

Hi @mbgower
The "gears" are not only thick and bold, they are ALSO have a contrast of 6.6:1 using the WCAG contrast equation.

"Fine detail" is not listed in the spec, but it IS a big part of the research I am doing in terms of contrast, and I gave an explanation of the relevance it the quoted post.

Put another way: contrast and visual acuity have an interrelationship wherein minimum contrast threshold is tied to a certain minimum size of stimulus. Increasing contrast for stimulus above this size does little to help acuity, but increasing contrast below this size can help readability down to a critical minimum size where no contrast increase can help legibility.

Once above a specific threshold, increasing perceived contrast does little to nothing to help readability, and increasing contrast too far (above 15:1 per FAA guidelines) decreases readability.

As such, stimulus size and weight (i.e. bold vs thin) have more to do with legibility than contrast. Though too, if the stimulus size is too large, it also becomes less readable (as I understand it, more to do with cognition and word recognition).

THE EMPIRE PHOTO

So with this, lets analyze the Empire example (all figures here use the WCAG contrast math)

The Legend: The bold text has a contrast of over 9:1 to as high as 15:1. The problem is the very thin text. Even though it appears to be printed in the same color, antialiasing/blurring cause the contrast to drop because it is so very thin. Even if you entered the actual LRV values based on the ink into the WCAG contrast equation (which would report 15:1) the actual perceived contrast is only 3.4:1 due to the blur/scatter of antialiasing/image softening. This coupled with it being very thin makes it even harder to read for someone with an impairment as their own "added blur" reduced the perceived contrast even more for the ultra thin letters.

#2 The Stairs: The contrast between the lines of the drawings of the stairs and the background is more that 5:1. But it doesn't matter if you have normal vision or not, those don't look like stairs, LOL. I wouldn't have thought they were stairs except for the descriptive text.

#4 the Bricks: The difference between the darkest brick and the lightest brick is 3:1 per WCAG math. And this is about the lowest contrast of any detail in this drawing.

In short, the details in this drawing easily meet the current 3:1 criteria from my measurements, the biggest problem is the fine, thin text.

THE COMPUTER DRAWING

The only thing in this very high contrast drawing that is less than 3:1 is the square CPU chip, which is just a little over 2:1, and even then the pins and one of the edges is 4:1 or more.

CONCLUSION:

These drawings do little to show that drawings are "hard to comply" as they easily comply with very minor noted exceptions. And in the case of Empire it's the poor choice of a fine thin font that is the issue, not the drawing.

To echo what @alastc said, meaningless boxes and rectangles without context or explanation doesn't tell much of a story. On the other hand, the empire drawing despite its flaws is more understandable due to the descriptive text, though the formatting of that text is poor within the context of this conversation.

[mraccess77]

I have to disagree about contrast and text size. While in general larger text can be read with the same contrast as smaller text -- it's just not that simple.

For some folks with limited fields or scotomas enlarging text means that they can get even less of a word into the visual field. So for some smaller text is needed -- enlarging the text isn't an option because it impacts reading ability. Too big of text is a problem for some.

In regards to contrast charts -- no matter the size of the letters there are some low contrast levels that can't be seen by some of us -- no matter how big it is -- so even if the letter was 3 inches high it may appear invisible to someone.

[Myndex]

I have to disagree about contrast and text size. While in general larger text can be read with the same contrast as smaller text -- it's just not that simple.

For some folks with limited fields or scotomas enlarging text means that they can get even less of a word into the visual field. So for some smaller text is needed -- enlarging the text isn't an option because it impacts reading ability. Too big of text is a problem for some.

In regards to contrast charts -- no matter the size of the letters there are some low contrast levels that can't be seen by some of us -- no matter how big it is -- so even if the letter was 3 inches high it may appear invisible to someone.

Hi @mraccess77 Yes, I think I mentioned that too big of a text was a problem too. But when I say size, I do mean size AND WEIGHT, which has a lit to do with my comments on the Empire photo above.

And to be clear, I'm not making any statement that contrast is not important (if I felt that way I wouldn't be spending the substantial time and resources I am in the studies for 695) if anything I am just trying to again point out that contrast, size, weight (and at some point chromatic aberration and ocular glare) are interrelated and interdependent, not independent.

As an example, I get Freshly meals, and I've been asking them for years to increase the size of the text of the microwave times on the package (and they haven't, GRRR). The contrast is maximum. It's black on white. And I can't read it AT ALL without glasses or a magnifying glasses for one reason and one reason only: the text is too small.

Contrast is max but it is illegible. Only size can help.

Yes, contrast sensitivity and the CSF is a problem with many impairments. For a normally sighted person, contrast sensitivity is 1% to 1.5% (lower is better) from 8 cd.m2 to over 500 cd.m2. Various impairments can increase this, but the common guideline of 3:1 CR is literally 300%, with 7:1 (700%) being recommended by the FAA human factors guide. There is ample research that CR higher than this is not helpful, and excessive CR becomes detrimental after a point.

As I mentioned in the Empire book above, the text is too thin in parts. No amount of contrast increase is going to fix that.