Contrast is about Size not Color

[Myndex]

How "Spatial Frequency" drives contrast

This is a discussion about using outlines on text or graphic elements to improve contrast, and the implications.

Simple Simon

Let's start with the most basic, general understanding:

"For a narrow border around the letter or element, the effective contrast is the greater of either the letter to the background or the thin outline to the background."

At least for the simplistic conformance model of WCAG 2, this is appropriate.

In other words, if a background is #eeeeee and the letter was #6a6a6a then the WCAG 2 contrast would be 4.66:1 (APCA contrast would be Lc 67).

• A thin border of #aaaaaa would not have an appreciable effect on the contrast, being between the two.
• A thin border of #4F4F4F is father from the background than the text, so there would be an improvement in perceived contrast. spatial frequency aside (as WCAG 2 does not calculate for spatial frequency effects).
  • The effective WCAG 2 contrast would be 7:1.
  • And Lc 78 In the "simple pair" version of APCA (this is the version in public beta).
    • In the multimode-model of APCA, it would depend on all of the relevant factors such as weight, outline stroke width, etc.
    • The multimode model is not intended to be the basis of any guideline, ever, due to complexity, but it calculates the contrast perception of multiple elements working together.
    • Nevertheless, for simple conformance, using the stroke width contrast in this case serves as the letter contrast.

Non-Simple

The complex nature of the psychophysics of human visual contrast perception is not something that WCAG 2 can predict, so it is rather moot. Nevertheless:

Where it gets most interesting is when the border is on the "other side" of the background than the font. For instance, the common case we use in film/television would be:

• The background (an image) with an average luminance around the text of #777777
• The text, with a luminance of about #eeeeee
• The text outline, at black #000000

In this case the actual perceived contrast is a combination of the text, outlines, and background, and it is "generally wrong" to make a claim regarding only two of the three colors in play. without knowing the spatial properties, the most you can say is:

• The perceived contrast is more than what might be predicted with #eeeeee text on a #777777 background, but
• Less than what would be predicted by #eeeeee on a #000000 background, and
• Much more than the #000000 against the #777777 background.

In this case, the thin #000000 improves contrast, but the degree of improvement is knowable only when the several other interconnected factors are known.

Regarding WCAG 2 contrast

The breakpoint at 24px/18pt is because that is the size used for "large print" books, so that reasoning was co-opted into the guidelines. WCAG 2 does not account for spatial frequency, and here, at the breakpoint we can see little difference in line width. This example is an enlargement of the rasterized text at 24px, 16px, and 12px, using black for the text #000000 for maximum contrast against the #e6e0d8 background. Notice that the relevant stroke widths at 24px (3:1) and 16px (4.5:1) are nearly the same at this weight (300), and the dominate part of the stike is still only 1px.

Here the weight is 400, and while the 24px font is now showing a slightly thicker stoke width, it is not appreciably thick even than an outline if one were present.

And here, the weight is 700 (standard bold) even so, the 24px is still not appreciably thicker, here still only 1px thicker than the 16px font.

An issue here is that "24px" is not a "large" font. (the WCAG 2 definition notwithstanding).

But what about a truly large font, say, 42px and bold:

The words "Size Examples" is a large font as defined in the real world. It also fails WCAG 2 as WCAG 2 contrast math reports the contrast as too low—though it is plainly readable due to the low spatial frequency.

Using this "actually large" text can answer the question of how an outline might apply.

"It's not the contrast it's how you use it"

But, how much contrast is needed for the outline, if the text itself is lacking contrast?

As should be obvious, readability here was improved much mor eby lowering the spatial frequency of the outline—making it thicker—than by increasing the color (luminance) contrast from 3:1 to 7:1, which is almost negligable for the 1px outline.

It Bears Me Repeating:

Contrast is not about the color pair nearly as much as it is about the spatial frequency of the element.