0

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?

3
  • 1
    WCAG 3.0 is still a long time - probably years - away from being the accepted standard. As of Feb 2023 WCAG 2.2 still hasn't been officially signed-off. You can use WCAG 3.0 as reference, but it's probably 2.2 you should be using today. There is no specific font-size requirement, and it's also going to depend on the device it's on (i.e. a phone is closer to your eyes than a laptop, so can have smaller text)
    – JonW
    Feb 3, 2023 at 16:26
  • Hi @JonW Holding a phone closer to the eyes doesn't work so well for people with presbyopia, which is pretty much everybody over the age of 42 or so. More importantly, not everybody has nice retina displays. Standard resolution displays don't do particularly well with fonts smaller than 14px, anti-aliasing effects tend to mangle tiny thin fonts and blend them into the background, reducing contrast substantially. Something we are considering is using media queries to determine screen resolution, which would allow alternate layouts based on screen technology.
    – Myndex
    Feb 11, 2023 at 15:08
  • Hi @JonW ... Yes you can hold the phone closer to your eyes and manufacturers know this as well, so the pixel pitch is much denser on the phone then on a desktop display for example. What's important is visual angle, and the CSS reference px is based around a visual angle of 1.278 minutes of arc as subtended onto the retina... So yes, you view your phone much closer, but those pixels are also much smaller. See this chart
    – Myndex
    Feb 11, 2023 at 18:01

2 Answers 2

4

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.

enter image description here

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

1

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.

1
  • 1
    Hi @Andy ... just an FYI, that rating system is no longer part of WCAG3, WCAG3 is undergoing a major overhaul at the moment, expected to take several more years. That said, font weight is definitely a huge predictor of contrast on displays because increasing weight lowers the spatial frequency which improves contrast.
    – Myndex
    Feb 11, 2023 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.