WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Pixels vs points / contrast ratios

for

From: Patrick H. Lauke
Date: Oct 10, 2017 5:24AM

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