Fluid font size accessibility warning

General
1

Hi,

I don’t understand this statement:

image
image745×624 18.9 KB

From all articles I could read on font size accessibility, they all tend to say that normal text size should be above 16px, and some say smaller (but not important) text is permitted, but minimum size 12px or so.

So I think the value to check is rather the minimum size in px, so here 21, and it is OK, as it should.
Because here, there is clearly no accessibility issue with font size (21px - 25px).

Or am I misunderstanding something?

2

Hello @yankiara,

This notice really concerns zooming. Basically, with this fluid typography, you’re going to make it really hard for your users to zoom in to that “responsive” text (it won’t, or not enough).

More can be read about this here: Responsive Type and Zoom — Adrian Roselli

1 Like
3

Thanks, I have to study that interesting article!

4

By the way, my custom SCSS fluid generator doesn’t give the same result as yours:

image
image700×240 5.63 KB

image

Utopia generator seems to agree with me:

image
image1276×680 36.1 KB

But I cannot spot the difference of size in frontend :wink:

5

Hi @Louis,

Sorry to BUMP this but I’m still not convinced by your fluid formula AND by your accessibility warning.
Is it something we can discuss?

So first, could you provide us with your clamp formula?
For it doesn’t give the same results as mine or Utopya’s.

Now, regarding accessibility…
Recently the article you mention has been updated:

image
image1335×691 55.3 KB

I’m glad because it seems Utopya.fi (my fluid reference) takes this seriously :slight_smile:

So I read the mentioned article which explains a bit better the accessibility issues.

But still, I can’t find in it an easy or direct way to tell if the clamp formula is accessible or not, like your warning seems to do. It seems more complex than that and doesn’t rely on a simple factor.

The article actually mentions a calculator to check if the clamp passes WCAG SC.

And with this tools, I don’t have the same result as you.
For instance, the example I mentioned at the beginning of this thread is perfectly OK, although your calculator gives a warning: https://fluid.style/type?min=21&max=25&min-bp=700&max-bp=1140&unit=“px”

I tried many many combinations of breakpoints and sizes, and I can’t find any general rule regarding the formula…

So, would it be possible to review your process and maybe improve it with these new informations?

Thanks in advance!