APCA (WCAG 3.0) does not allow for 14px font to be used as a regular base

Question

According to APCA (WCAG 3.0), we are not able to use 14px font as a regular base, but when it comes to SaaS application design, 14px is commonly used as the base font size. Despite my attempt to use pure black as a color, I was still advised to avoid it. This raises the question: how can we make the base font more accessible without increasing the font size?

Answer 1

Short Answer

It actually depends more on the x-height, and on the use case as well. What was in the FPWD of WCAG 3 (over two years ago) was little more than a placeholder.

Longer Answer

DISCLOSURE: I created the APCA, and am research lead regarding the continued development of the related guidelines that emerged from the Visual Contrast group under Silver/WCAG_3.

This is still a project under active research and development. What is currently active is a public beta, and questions and comments are welcomed at the readability forum at the GitHub repo.

Here's a relevant example:

14px Verdana has the same x-height as 17px Times New Roman.

So, it's not 14px for any particular font, it's 14px for a reference font, and other fonts need to be matched to that, in theory. Bronze level won't require this, but higher levels of compliance will.

And at this time, CSS does not have a reasonable nor well adopted way to set x-height directly. And that's still not the whole battle. Font weight is also non standard, and we haven't even broached the subject of glyph design.

Visual contrast is directly affected by spatial frequency, for our purposes that means font weight and font size. Above about 28px bold (depending on the font of course) we're getting into the "contrast constancy" range, where increases in contrast have little to no functional effect.

However for fonts smaller/thinner than that we very rapidly lose contrast sensitivity and therefore have to substantially increase luminance contrast to maintain readability.

A 14px font is considered equivalent to a 10.5pt font in print, other factors being equal. Is it big enough?

That depends on how readable you want it to be.

Something that we are introducing to the guidelines right now is "use cases" where are the purpose of the text dictates how readable it needs to be. For instance, you don't need a copyright notice to be at the best and most readable contrast in fact that would only cost clutter in the design.

I discussed use cases in this thread which is draft material that's being worked into an actual guideline at the moment.

x-height marks the spot

The other thing that is particularly important is the x-height, more-so than the font-size: ... For standard vision, the critical x-height for best fluent readability is a visual angle of at least 0.2° as subtended onto the retina.

0.2° is 12 minutes of arc.

Theoretically, the CSS reference px is 1.278 minutes of arc, which assumes a reference display at a given distance. Manufacturers set the pixel pitch on their devices based on viewing distance, and 1.278 minutes of arc per px is not unreasonable.

What this translates to is an x-height of a little less than 9.5px, this is for standard 20/20 vision for best speed and comprehension, when associated with an appropriate (i.e. critical) contrast.

• For Verdana, this is font-size: 17px
• For Times, this is font-size: 21px

Your mileage may vary.

Public Beta

While WCAG 3 is years away, there is a pressing need today for perceptually uniform contrast guidance, in particular for use with Dark Mode, as WCAG 2.x can not calculate dark colors correctly.

The APCA Readability Guidelines are a public beta, and better for actual accessibility. For instance, APCA is better at helping color vision deficiencies such as protanopia, and for determining contrasts for dark mode.

Pure Black

The use of pure-black for body text is absolutely fine, in fact for body text it's usually ideal. The actual problem with "too much contrast" is related to too high of a screen luminance.

I also discuss this in the overview article "The Realities And Myths Of Contrast And Color".

Please feel free to follow up with questions.

References

• whats-red-black-also-not-read
• please-stop-using-grey-text
• realities-myths-contrast-color
• APCA Draft Test Methods

Answer 2

It’s more nuanced than that.

WCAG 3 uses a rating and three levels of compliance. So you are able to use any font size you want, but it will impact your rating accordingly.

Rating 0: Any failures on the Advanced Perceptual Contrast Algorithm (APCA) lookup table or the lowest APCA value is more than 15% below the values on the APCA lookup table

Rating 1: The lowest APCA value is 10-15% below the values on the APCA lookup table

Rating 2: The lowest APCA value is 5-9% below the values on the APCA lookup table

Rating 3: The lowest APCA value is 1-4% below the values on the APCA lookup table

Rating 4: All reading text meets or exceeds the values on the APCA lookup table

WCAG 3 Guideline Visual contrast of text

The APCA Contrast Calculator returns a Lightness Contrast (Lc) of 106 for white on black.

The algorithm also takes into account the font weight. So 106 will achieve the highest rating for:

• 14.5px at 400 (normal)
• 14px at 500

You can increase font-weight to improve the accessibility score.