Note 5 at "contrast ratio" is outdated and wrong

[JAWS-test]

Note 5 at "contrast ratio" is outdated and wrong:

When there is a border around the letter, the border can add contrast and would be used in calculating the contrast between the letter and its background. A narrow border around the letter would be used as the letter. A wide border around the letter that fills in the inner details of the letters acts as a halo and would be considered background.

• outdated: It talks about letters, but the note also refers to 1.4.11, where it is not about letters (This applies analogously to note 2 and 3)
• wrong: "A narrow border around the letter would be used as the letter" - It does not matter with a thin line whether it has sufficient contrasts to the background or foreground, the main thing is that the contrasts are sufficient to one of them.

There is also a loophole here: 3.0 instead of 4.5 is required for large type. Reason: The line thickness is better. But what applies if the contrast does not come from the font itself, but from the border? Is 3:0 sufficient for a large font with a thin border? It should not be, but it seems to be

[Myndex]

To clarify what the above poster is saying:

• This issue relates only to 1.4.11, and his link links to 1.4.11, though the title and post do not make this clear.

Nevertheless, I disagree with the post overall, and for reasons outlined below:

Response A

outdated: It talks about letters,.....

I'd say "misplaced information" rather than "Outdated" — clearly, the contrast guidance from 1.4.3 was copy/pasted here without revision. Nevertheless, the sam contrast concepts apply, and one could simply replace the word "letter" with "element"

Response B

wrong: "A narrow border around the letter would be used as the letter" - It does not matter with a thin line whether it has sufficient contrasts to the background or foreground...

The note is at least partly correct, though it could be more clearly stated as:

"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.

Response C

There is also a loophole here: 3.0 instead of 4.5 is required for large type. Reason: The line thickness is better.
This is not true.

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.