WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: size of text when determining color contrast

for

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

From: Angela French
Date: Mon, Oct 06 2014 10:00AM
Subject: size of text when determining color contrast
No previous message | Next message →

Hello,
When testing contrast of text on background, WCAG 2.0 refers to "normal" and "large" text. What defines these sizes? I'm especially wondering in the context of responsive web design, where what is large on a PC may not be so large on a smart phone.

Thank you for any guidance.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.checkoutacollege.com<;http://www.checkoutacollege.com>;
www.sbctc.edu<;http://www.sbctc.edu>;

From: Whitney Quesenbery
Date: Mon, Oct 06 2014 10:15AM
Subject: Re: size of text when determining color contrast
← Previous message | Next message →

Point sizes area a handy shorthand for measurements of physical size,
because they are a fraction of an inch. .5 inches (or 36 points) is .5
inches, no matter what screen the text is on.

On Mon, Oct 6, 2014 at 12:00 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:

> Hello,
> When testing contrast of text on background, WCAG 2.0 refers to "normal"
> and "large" text. What defines these sizes? I'm especially wondering in
> the context of responsive web design, where what is large on a PC may not
> be so large on a smart phone.
>
> Thank you for any guidance.
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.checkoutacollege.com<;http://www.checkoutacollege.com>;
> www.sbctc.edu<;http://www.sbctc.edu>;
>
> > > >

From: Patrick H. Lauke
Date: Mon, Oct 06 2014 11:01AM
Subject: Re: size of text when determining color contrast
← Previous message | Next message →

On 06/10/2014 17:15, Whitney Quesenbery wrote:
> Point sizes area a handy shorthand for measurements of physical size,
> because they are a fraction of an inch. .5 inches (or 36 points) is .5
> inches, no matter what screen the text is on.

Actually, that's not quite correct. In the old definition for CSS
values, this was always true...but no device actually implemented this
part. Instead - with the exception of print, if I'm not mistaken - all
measures like inches, millimeters, points etc are anchored to the
*reference pixel*, which varies across devices and is itself related to
the average viewing distance of a screen.

http://www.w3.org/TR/css3-values/#absolute-lengths

This is actually one of my bugbears with WCAG 2.0 ... talking about
measurements in points is irrelevant for the most part, as there is no
reliable way to relate "pt" to the real physical size of text. Viewing
distance is also a factor...in theory, if devices do correctly set their
viewport so that a CSS pixel matches the ideal reference pixel closely,
good times...a "pt" will then be close to the idealised "pt" taking into
account viewing distance. However, even this relationship is broken in
the case where browsers don't have a viewport matching the ideal
viewport (for instance, a site viewed on a mobile device, but lacking
the meta viewport width=device-width, meaning that the browser will use
some default width like 980px or similar, which then makes a CSS pixel
far smaller than the reference pixel, and ergo a "pt" is much smaller
than what it should ideally be).

Anyway, long story short, beware that "pt" or similar measurements can
be completely divorced from reality (and, from that perspective, are
fairly useless as a measurement for WCAG 2.0 purposes).

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: Jukka K. Korpela
Date: Mon, Oct 06 2014 11:28AM
Subject: Re: size of text when determining color contrast
← Previous message | Next message →

2014-10-06 20:01, Patrick H. Lauke wrote:

> On 06/10/2014 17:15, Whitney Quesenbery wrote:
>> Point sizes area a handy shorthand for measurements of physical size,
>> because they are a fraction of an inch. .5 inches (or 36 points) is .5
>> inches, no matter what screen the text is on.
>
> Actually, that's not quite correct. In the old definition for CSS
> values, this was always true...but no device actually implemented this
> part. Instead - with the exception of print, if I'm not mistaken - all
> measures like inches, millimeters, points etc are anchored to the
> *reference pixel*, which varies across devices and is itself related to
> the average viewing distance of a screen.

Well, that's at least what we can read between the lines in CSS3 specs.
But even in print, the in unit does not usually match the physical unit
of inch exactly. Anyway, what seems to be more important is that WCAG
2.0 defines "large text" in a rather complicated and vague way
(inaccessibly, I dare say):
http://www.w3.org/TR/WCAG20/#larger-scaledef
It says: "with at least 18 point or 14 point bold or font size that
would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts".

> This is actually one of my bugbears with WCAG 2.0 ... talking about
> measurements in points is irrelevant for the most part, as there is no
> reliable way to relate "pt" to the real physical size of text.

I think that despite all the vagueness and obscurity, the WCAG 2.0
definition is still useful. In modern CSS specs, 1pt equals 4/3 "pixels":
http://www.w3.org/TR/css3-values/#absolute-lengths

It's the "pixel" (px) concept that varies by device. Well, at least to
the same extent as any other CSS "absolute" length unit.

So what is the practical problem? WCAG 2.0 gives criteria for "large"
text. The physical meaning of pt valued (and other) font sizes varies,
but conformance to WCAG 2.0 is still achieved if you meet the
requirements using *its* definitions for "large text".

Yucca

From: John Foliot
Date: Mon, Oct 06 2014 11:33AM
Subject: Re: size of text when determining color contrast
← Previous message | Next message →

Jukka K. Korpela wrote:
>
> I think that despite all the vagueness and obscurity, the WCAG 2.0
> definition is still useful. In modern CSS specs, 1pt equals 4/3
> "pixels":
> http://www.w3.org/TR/css3-values/#absolute-lengths
>
> It's the "pixel" (px) concept that varies by device. Well, at least to
> the same extent as any other CSS "absolute" length unit.

I recommend the following:
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
or this YouTube video:
https://www.youtube.com/watch?v=4wscVOXjIzQ (yes, that would be my hat in
the front row...)

JF

From: Jesse Hausler
Date: Mon, Oct 06 2014 12:28PM
Subject: Re: size of text when determining color contrast
← Previous message | Next message →

I go with 18pt or 14pt-Bold and larger as "Large".
***large scale (text)

with at least 18 point or 14 point bold or font size


http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#larger-scaledef

On Mon, Oct 6, 2014 at 10:33 AM, John Foliot < = EMAIL ADDRESS REMOVED = > wrote:

> Jukka K. Korpela wrote:
> >
> > I think that despite all the vagueness and obscurity, the WCAG 2.0
> > definition is still useful. In modern CSS specs, 1pt equals 4/3
> > "pixels":
> > http://www.w3.org/TR/css3-values/#absolute-lengths
> >
> > It's the "pixel" (px) concept that varies by device. Well, at least to
> > the same extent as any other CSS "absolute" length unit.
>
> I recommend the following:
> http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
> or this YouTube video:
> https://www.youtube.com/watch?v=4wscVOXjIzQ (yes, that would be my hat
> in
> the front row...)
>
> JF
>
>
>
>
> > > >

From: Patrick H. Lauke
Date: Mon, Oct 06 2014 4:32PM
Subject: Re: size of text when determining color contrast
← Previous message | Next message →

On 06/10/2014 18:28, Jukka K. Korpela wrote:
> It's the "pixel" (px) concept that varies by device. Well, at least to
> the same extent as any other CSS "absolute" length unit.

Not just by device. On the same device, depending on whether or not you
set a meta viewport of @viewport in CSS, 1px changes dramatically.

> So what is the practical problem? WCAG 2.0 gives criteria for "large"
> text. The physical meaning of pt valued (and other) font sizes varies,
> but conformance to WCAG 2.0 is still achieved if you meet the
> requirements using *its* definitions for "large text".

The practical problem is that 1px is a unit mostly divorced from
reality, as it depends on a variety of factors. Sure, of course you can
check strictly by the definition of WCAG 2, but a pass/fail will have no
real connection to reality, sometimes quite dramatically so, which in
turn means pass/fail will be completely irrelevant as it won't reflect
real-world actual accessibility...

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: Jukka K. Korpela
Date: Tue, Oct 07 2014 12:06AM
Subject: Re: size of text when determining color contrast
← Previous message | Next message →

2014-10-07 1:32, Patrick H. Lauke wrote:

> The practical problem is that 1px is a unit mostly divorced from
> reality, as it depends on a variety of factors.

So do other CSS units.

> Sure, of course you can
> check strictly by the definition of WCAG 2,

That would be relevant if a requirement to conform to WCAG 2.0 has been
imposed. You can then apply the criteria as defined there, without
needing to analyze theoretically what pt (which is the unit mentioned
there in this context) really means

> but a pass/fail will have no
> real connection to reality,

That's somewhat extremistic.

Accessibility and WCAG 2.0 are distinct things, but related. I don't see
any particularly serious problem with the definition of "large text",
even though it is somewhat odd and vague. If you set font size to 18pt
or larger, you can treat it as "large" when determining color contrast.
It is true that in a pocket-size device, 18pt is likely to be much
smaller than 18pt in traditional print typography is. Then again, the
viewing distance is also very different.

Yucca

From: Patrick H. Lauke
Date: Tue, Oct 07 2014 1:59AM
Subject: Re: size of text when determining color contrast
← Previous message | No next message

On 07/10/2014 07:06, Jukka K. Korpela wrote:

> Accessibility and WCAG 2.0 are distinct things, but related. I don't see
> any particularly serious problem with the definition of "large text",
> even though it is somewhat odd and vague.

Not saying it's a serious problem, but what I do have an issue with is
that it gives hard values to asses text size against, but it doesn't
make it clear what base size those sizes are anchored on. We know they
can't be actual physical sizes, so what's the anchored reference value?
If the intention (as seems to be the case, asking on WAI-IG list) is to
just say "text that's 1.5x larger than the base font size set for the
page, or 1.2x and bold" then it would be more helpful if the normative
glossary definition for "large scale (text)" actually said that.

> If you set font size to 18pt
> or larger, you can treat it as "large" when determining color contrast.
> It is true that in a pocket-size device, 18pt is likely to be much
> smaller than 18pt in traditional print typography is. Then again, the
> viewing distance is also very different.

But devs generally don't sets font size in pt values - in fact, if
following some advice from 1.4.4 Resize tex, they'd be using relative
font sizing instead. So again, if the intent was to count text that is
larger by a factor of 1.5 or 1.2 and bold from the base font size as
large, then it should say that, instead of muddying the waters by
talking about pt sizes.

IMHO, of course.

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