Note 5 at "contrast ratio" is outdated and wrong

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?

This shows an example font that's a very large font, but with extremely low contrast so that is almost unreadable in fact it is unreadable for most people. And then that same exact font and color, shown four different times with four different thicknesses of an outline around the text, where are the color of the outline is minimal three to one contrast. It is clear fromt he example that as the outline gets thick, the text becomes mroe readable.

Tthen that same exact font and color, shown four different times with four different thicknesses of an outline around the text, This time the contrast is a better WCAG 7:1. It is clear fromt he example that as the outline gets thick, the text becomes mroe readable. Notice that raising the contrast substantially did little to help readability compared to increasing the line thickness. The final line in the graphic reads : 'Upshot: it should be readily apparent that it is the change in spatial frequency of the line thickness, and not the color of the line, that is the principal factor in the perceived 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.

w3c / wcag