WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Pixels vs points / contrast ratios

for

Number of posts in this thread: 4 (In chronological order)

From: Karl Brown
Date: Tue, Oct 10 2017 4:57AM
Subject: Pixels vs points / contrast ratios
No previous message | Next message →

Hi all,

I think there's been a lot of discussion about this before, but I wanted to
check my understanding of what "large scale text" translates as according
to the guidelines:

'The actual size of the character that a user sees is dependent both on the
author-defined size and the user's display or user-agent settings. For many
mainstream fonts, 14 and 18 point [pt] is roughly equivalent to 1.2 or 1.5
em or 120% or 150% of the default size for body text (assuming that the
body font is 100%), but authors would need to check this for the particular
fonts in use-


Am I right in assuming that large scale bold text would be 14x1.2 (16.8
pixels) and large scale non-bold would be 18x1.5 (27 pixels)?


I have a lot of designers asking if they can use colour combinations at
3.1:1 and not liking when I suggest 4.5:1, so if there is an actual formula
we can use that'd help. Is the one from the guidelines suitable?


For this I'm ignoring the design considerations on whether or not the font
size looks good aesthetically, I'm more focused on translating pt units to
pixels.

--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015

From: Patrick H. Lauke
Date: Tue, Oct 10 2017 5:24AM
Subject: Re: Pixels vs points / contrast ratios
← Previous message | Next message →

On 10/10/2017 11:57, Karl Brown wrote:
> Hi all,
>
> I think there's been a lot of discussion about this before, but I wanted to
> check my understanding of what "large scale text" translates as according
> to the guidelines:
>
> 'The actual size of the character that a user sees is dependent both on the
> author-defined size and the user's display or user-agent settings. For many
> mainstream fonts, 14 and 18 point [pt] is roughly equivalent to 1.2 or 1.5
> em or 120% or 150% of the default size for body text (assuming that the
> body font is 100%), but authors would need to check this for the particular
> fonts in use-
>
>
> Am I right in assuming that large scale bold text would be 14x1.2 (16.8
> pixels) and large scale non-bold would be 18x1.5 (27 pixels)?
>
>
> I have a lot of designers asking if they can use colour combinations at
> 3.1:1 and not liking when I suggest 4.5:1, so if there is an actual formula
> we can use that'd help. Is the one from the guidelines suitable?
>
>
> For this I'm ignoring the design considerations on whether or not the font
> size looks good aesthetically, I'm more focused on translating pt units to
> pixels.

A bit of history: WCAG took the 14pt/18pt measures from the print world.
Originally, it seems the intent was to mean real-world points, as in "as
measured on the screen" (if you held a rules to your monitor kind of
thing). Of course, the actual real-world size any content is rendered
varies depending on operating system, the user's resolution settings,
the actual physical size of the monitor (as you can have monitors with
the same nominal resolution, but wildly different physical screen
sizes), etc, and these are all outside of the control or knowledge of a
content author.

CSS does allow authors to use "pt" and similar physical units
https://drafts.csswg.org/css-values/#absolute-lengths

However, for anything other than print media (and even there it's not
always exact, as it depends on things like printer drivers etc), these
physical units are actually anchored on the "reference pixel" (and do
not necessarily reflect the size anything is actually rendered at in
real world physical units).

While some WCAG scholars still contend that the indicated pt sizes
should be worked out in terms of real-world rendering, it's simply
impossible.

(for even more detail, see https://github.com/w3c/wcag/issues/181)

So all things being equal, pt sizes should really be converted into
pixel sizes (as pt is anchored on the reference pixel, like any other
absolute unit in screen media). Using the table given in
https://drafts.csswg.org/css-values/#absolute-lengths

1pt = 1/72th of 1in
1in = 2.54cm = 96px
1pt = 1/72th of 96px = 1.3(recurring) px

so

14pt = 18.6(recurring) px, so rounding it to about 19px
18pt = 24px

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Patrick H. Lauke
Date: Tue, Oct 10 2017 6:06AM
Subject: Re: Pixels vs points / contrast ratios
← Previous message | Next message →

A small addendum:

> 'The actual size of the character that a user sees is dependent both > on the> author-defined size and the user's display or user-agent
settings. For > many> mainstream fonts, 14 and 18 point [pt] is roughly
equivalent to 1.2 or > 1.5> em or 120% or 150% of the default size for
body text (assuming that the> body font is 100%), but authors would need
to check this for the > particular> fonts in use->>> Am I right in
assuming that large scale bold text would be 14x1.2 (16.8> pixels) and
large scale non-bold would be 18x1.5 (27 pixels)?
In most browsers, on default settings, 1em = 100% = 16px

1.2em = 16px * 1.2 = 19.2px
1.5em = 16px * 1.5 = 24px

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Karl Brown
Date: Wed, Oct 11 2017 1:31AM
Subject: Re: Pixels vs points / contrast ratios
← Previous message | No next message

Thanks, Patrick. That all makes sense.

The designers/brand team won't be happy that one of their favourite
combinations isn't accessible at the sizes they're using it but that's why
I suggested they aim for 4.5:1 for all of them.

On Tue, Oct 10, 2017 at 1:06 PM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> A small addendum:
>
> 'The actual size of the character that a user sees is dependent both > on
>> the> author-defined size and the user's display or user-agent
>>
> settings. For > many> mainstream fonts, 14 and 18 point [pt] is roughly
> equivalent to 1.2 or > 1.5> em or 120% or 150% of the default size for body
> text (assuming that the> body font is 100%), but authors would need to
> check this for the > particular> fonts in use->>> Am I right in assuming
> that large scale bold text would be 14x1.2 (16.8> pixels) and large scale
> non-bold would be 18x1.5 (27 pixels)?
> In most browsers, on default settings, 1em = 100% = 16px
>
> 1.2em = 16px * 1.2 = 19.2px
> 1.5em = 16px * 1.5 = 24px
>
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >



--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015