E-mail List Archives

Search E-mail List Archives for

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

From: David Ashleydale
Date: Wed, Jun 03 2009 10:25AM
Subject: Color Contrast
No previous message | Next message →

I really love the Color Contrast
Checker<http://webaim.org/resources/contrastchecker/>;,
but I have a question about the WCAG 2.0 requirements. It mentions the font
sizes 18 point and 14 point. If I were to write this requirement in pixels,
should I use 24 pixels and 19 pixels, respectively? Point size seems to
depend on screen resolution. For 72 ppi, 14 point and 14 pixels are the same
size. But at 96 ppi, 14 point is closer to 19 pixels.

Does the WCAG 2.0 checkpoint mean to depend on the screen resolution in this
way? I'm working with our brand department on a color palette and I need to
let them know which text/background color combinations provide enough
contrast, but first they need to know what 18 point and 14 point mean.

Thanks,
David

From: Lauren O'Donovan
Date: Wed, Jun 03 2009 10:30AM
Subject: Re: Color Contrast
← Previous message | Next message →

Not really sure about the full answer to your question, but as I'm aware
best practice says that sizes shouldn't be fixed in pixels for anything.
Sizes should be relative to allow assistive technologies and small devices
properly interact with the page.

~Lauren

On Wed, Jun 3, 2009 at 5:20 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = >wrote:

> I really love the Color Contrast
> Checker<http://webaim.org/resources/contrastchecker/>;,
> but I have a question about the WCAG 2.0 requirements. It mentions the font
> sizes 18 point and 14 point. If I were to write this requirement in pixels,
> should I use 24 pixels and 19 pixels, respectively? Point size seems to
> depend on screen resolution. For 72 ppi, 14 point and 14 pixels are the
> same
> size. But at 96 ppi, 14 point is closer to 19 pixels.
>
> Does the WCAG 2.0 checkpoint mean to depend on the screen resolution in
> this
> way? I'm working with our brand department on a color palette and I need to
> let them know which text/background color combinations provide enough
> contrast, but first they need to know what 18 point and 14 point mean.
>
> Thanks,
> David
>

From: Jared Smith
Date: Wed, Jun 03 2009 10:40AM
Subject: Re: Color Contrast
← Previous message | Next message →

On Wed, Jun 3, 2009 at 10:20 AM, David Ashleydale wrote:

> Does the WCAG 2.0 checkpoint mean to depend on the screen resolution in this
> way?

WCAG provides a definition of what it means at
http://www.w3.org/TR/WCAG20/#larger-scaledef

You should base it off the default font size for standard browsers. 14
and 18 point would be 1.2 and 1.5 em or 120% and 150% of the default
size for body text. As long as you're using relative font sizes, you
don't need to worry about the actual pixel size of the rendered text -
just worry about how much bigger the text is proportionally to the
default (100%) font size.

Hopefully that makes sense.

Jared Smith
WebAIM

From: Simius Puer
Date: Wed, Jun 03 2009 10:45AM
Subject: Re: Color Contrast
← Previous message | Next message →

Hi David

The answer lies in the small print at the bottom of the WCAG.

*Large scale (text)*

[...]

*Note 2: *Font size is the size when the content is delivered. It does not
include resizing that may be done by a user.

*Note 3: *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 body text fonts, 14 and 18 point is roughly
equivalent to 1.2 and 1.5 em or to 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. When fonts are defined in relative
units, the actual point size is calculated by the user agent for display.
The point size should be obtained from the user agent, or calculated based
on font metrics as the user agent does, when evaluating this success
criterion. Users who have low vision would be responsible for choosing
appropriate settings.
...now surely that is perfectly clear? ;)

Basically they have no entirely solid answer but for mainstream fonts "14
and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150%" is
the key point that I believe you are looking for.

If you are in doubt of the end font size after you have applied numerous CSS
rules then I can recommend using Firebug (Firefox extension) or Dragonfly
(Opera extension) to determine the end size.

From: Randall Pope
Date: Wed, Jun 03 2009 10:55AM
Subject: Re: Color Contrast
← Previous message | Next message →

As I'm not sure of the full answer either but I believe that the font-size
should be set in ems, instead of px or pt. This would give the best font
resizing when using IE. I'm unable to find the font resizing in Firefox.
But on the other hand both have zoom in and zoom out which is ok to me.

With Warm Regards,
Randall "Randy" Pope
American Association of the Deaf-Blind
Website: http://www.aadb.org

301 495-4402 VP/TTY
301 495-4403 Voice
301 495-4404 Fax
AIM: RandyAADB

Want to keep up with the latest news in the Deaf-Blind Community? Consider
subscribing to the monthly newsletter, "AADB Today" at http://aadb.org. It's
free and AADB membership is not required.

From: Simius Puer
Date: Wed, Jun 03 2009 11:05AM
Subject: Re: Color Contrast
← Previous message | Next message →

Hi Randy

A little off-topic but...

If you need to zoom text only in Firefox use the menu: View > Zoom > Zoom
Text Only ...then zoom away as normal

enjoy!

From: Sven Jenzer
Date: Wed, Jun 03 2009 12:20PM
Subject: Re: Color Contrast
← Previous message | Next message →

I use the Colour Contrast Analyser made in downunder:
http://www.visionaustralia.org.au/info.aspx?page=628
If you choose the algorithm "luminosity" you'll see wcag 2 applied on
small and big fontsize and you'll understand a little bit more. Wonderful!

Point is a unit for measuring in typograhy:
http://en.wikipedia.org/wiki/Point_(typography) used in DTP.
It is *a fix* measure unit, and used (i suppose!) of WAI for describing
the really good textsize independent of Screen-Resolution.

Pixel, em and % are all relative measures. (Pixel depends on
Scren-Resolution!) And these are the webdesign units, nobody uses points.

kind regards from switzerland
Sven Jenzer
www.access-for-all.h


David Ashleydale schrieb:
> I really love the Color Contrast
> Checker<http://webaim.org/resources/contrastchecker/>;,
> but I have a question about the WCAG 2.0 requirements. It mentions the font
> sizes 18 point and 14 point. If I were to write this requirement in pixels,
> should I use 24 pixels and 19 pixels, respectively? Point size seems to
> depend on screen resolution. For 72 ppi, 14 point and 14 pixels are the same
> size. But at 96 ppi, 14 point is closer to 19 pixels.
>
> Does the WCAG 2.0 checkpoint mean to depend on the screen resolution in this
> way? I'm working with our brand department on a color palette and I need to
> let them know which text/background color combinations provide enough
> contrast, but first they need to know what 18 point and 14 point mean.
>
> Thanks,
> David
>

From: David Ashleydale
Date: Wed, Jun 03 2009 12:30PM
Subject: Color Contrast
← Previous message | Next message →

Thanks for your help with this. The main problem I was running into was that
our designers often use Photoshop for making prototypes and specs. When I
told them about the 18 point and 14 point requirements, they responded that
points and pixels are the same. I didn't think this was true, so I gave it a
try. When I created a new image, it defaulted to 72 ppi and sure enough 14
pt and 14 px were the same. However, when I changed it to 96 ppi, 14 pt was
closer to 19 px, which is what I had observed in HTML.

We definitely use relative units for HTML, so I tried the 1.2 em and 1.5 em
and that also gave the same result as 19 px and 24 px. However, we also have
some marketing assets on our site that are images with text in them. The
designers need to know the non-relative units so that they can create these
assets with enough contrast (Photoshop doesn't have font size units in em or
% - just pixels, points and mm). So I will tell them to use 24 px and 19 px
bold as the "large" font size when using the Color Contrast Checker.

P.S. We also try not to use text in images if possible, but the font family
for our brand is not a standard font that is included with most computers.

Thanks,
David

From: Randall Pope
Date: Wed, Jun 03 2009 1:10PM
Subject: Re: Color Contrast
← Previous message | Next message →

Actually the px and point are not the same when resizing the font. I know
that IE6 the font set in px won't enlarged while it will under Firefox. So
I would rather use point setting than px. I do notice that ems enlarged much
bigger than point setting. The major drawback in font resizing is the look
of the page can get quite a mess and sometime harder to read.

At least that is my experience.

With Warm Regards,
Randall "Randy" Pope
American Association of the Deaf-Blind
Website: http://www.aadb.org

301 495-4402 VP/TTY
301 495-4403 Voice
301 495-4404 Fax
AIM: RandyAADB

Want to keep up with the latest news in the Deaf-Blind Community? Consider
subscribing to the monthly newsletter, "AADB Today" at http://aadb.org. It's
free and AADB membership is not required.

From: David Ashleydale
Date: Wed, Jun 03 2009 5:55PM
Subject: Color Contrast
← Previous message | Next message →

Hi,

Sorry to keep harping on this, but could someone help me find a definitive
answer to the points vs. pixels thing? My designers keep telling me that
Photoshop, Illustrator, etc. are their main tools and that when the WCAG
standard says "14 pt / bold" can be considered "large", they think they
should be able to choose 14 pt and bold in Photoshop and have that work. I
took a look at what Photoshop considers to be 14 pt and it's a lot smaller
than what HTML considers to be 14 pt.

But they insist that they are following the WCAG standard because they chose
14 pt in Photoshop.

Do any of you have an explanation for this that I can give to them? Is there
a reason that 14 pt in Photoshop would be different than 14 pt in HTML?
Which one did the WCAG mean? When I look at WebAIM's Color Contrast Checker,
there is a sentence that says "I am big text." I looked at the source and it
says that it is 14 pt and bold. This 14 pt is much larger than the 14 pt
that Photoshop uses by default.

1.2 em and 1.5 em are useful units, but how big is 1 em? If it's 16 px, then
1.2 em would be about 19 px and 1.5 em would be 24 px. But one of our
designers said he thought that 1 em was equal to 12 px, not 16 px.

If choosing 14 pt in Photoshop is incorrect for following this standard,
what should the procedure be for using Photoshop?

Any help on this would be greatly appreciated. It's causing quite a stir in
my company. ;-)

Thanks,
David

From: S.R. Emerson, Accrete Web Solutions
Date: Wed, Jun 03 2009 6:50PM
Subject: Re: Color Contrast
← Previous message | Next message →

The Web Is Not Print
==========================="Understanding the difference between print and the web is important because
people won't read your content or spend money at your site if they can't use
it. If you're designing webpages with the same mindset you'd have for
designing a brochure, you likely have fewer customers or readers than you
could.

The science is there and the research has been done: people behave
differently online than they do when reading print, and as designers, we can
either facilitate use of our websites, or hinder it.

I've tried my damnedest to keep this summary opinion free, but I'll finish
with one personal observation: Our job titles have the word 'web' in them,
and if we're designing for the web as if we were designing for print, we're
not doing our jobs."
Reference: http://www.cactusflower.org/the-web-is-not-print/

Care With Font Size
==========================="Units: avoid absolute length units for screen display

Do not specify the font-size in pt, or other absolute length units for
screen stylesheets. They render inconsistently across platforms and can't be
resized by the User Agent (e.g browser). Keep the usage of such units for
styling on media with fixed and known physical properties (e.g print).

Use relative length units such as percent or (better) em

even better, if a base font-size is set for the document, use absolute size
([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or
relative size ([ larger | smaller ]) when defining the font size for a
particular element within the document. "
Reference: http://www.w3.org/QA/Tips/font-size

S. Emerson
Accrete Web Solutions
www.accretewebsolutions.ca

From: Jared Smith
Date: Wed, Jun 03 2009 8:55PM
Subject: Re: Color Contrast
← Previous message | Next message →

On Wed, Jun 3, 2009 at 5:55 PM, David Ashleydale wrote:

> Sorry to keep harping on this, but could someone help me find a definitive
> answer to the points vs. pixels thing?

The answer is that there is no answer. There is no direct comparison
between print points and screen rendered points. Knowing that there
isn't a way to do this exactly, you can just use the following and
just say it's gospel truth because someone at WebAIM said so.

Default font size: 1em = 100% = 16px = 12pt = 16PSpt

Large font: 1.5em = 150% = 24px = 18pt = 24PSpt

Large/bold font: 1.166em = 116.66% = 18.66px = 14pt = 18.66PSpt

(pt's are points on in HTML and PSpt are points in Photoshop)

And before anybody corrects me, yes I know this is system dependent
and blah blah, but it's close enough for WCAG conformance.

So if the text they've created in Photoshop is >24pt or >18.66pt and
bold, then it's "large-scale text" and needs a contrast ratio of 3:1.
If it's smaller, then it needs the higher 4.5:1 contrast ratio. And
heaven forbid they actually give big text the higher contrast ratio!!
It's totally silly that you and your designers are so hung up on
compliance that it's resorted to something like this.

I can sum up the WCAG contrast requirements as, "Text needs good
contrast. If it's big text, it doesn't require quite as much
contrast."

You can eyeball most of this - and ultimately accessibility comes down
to eyeballs, not ems, points, or contrast ratios. Nobody's going to
bust your chops over the difference in required contrast ratios for
text that is a sized in points versus pixels.

Jared

From: Lauren O'Donovan
Date: Thu, Jun 04 2009 3:10AM
Subject: Re: Color Contrast
← Previous message | Next message →

And just an additional point, unless your designers are designing logos -
they shouldn't be putting the text in at the photoshop stage (for example
if the text is web content, or a button). As then the text will actually be
an image, and unreadable by screen readers.

~Lauren

On Thu, Jun 4, 2009 at 12:55 AM, David Ashleydale < = EMAIL ADDRESS REMOVED = >wrote:

> Hi,
>
> Sorry to keep harping on this, but could someone help me find a definitive
> answer to the points vs. pixels thing? My designers keep telling me that
> Photoshop, Illustrator, etc. are their main tools and that when the WCAG
> standard says "14 pt / bold" can be considered "large", they think they
> should be able to choose 14 pt and bold in Photoshop and have that work. I
> took a look at what Photoshop considers to be 14 pt and it's a lot smaller
> than what HTML considers to be 14 pt.
>
> But they insist that they are following the WCAG standard because they
> chose
> 14 pt in Photoshop.
>
> Do any of you have an explanation for this that I can give to them? Is
> there
> a reason that 14 pt in Photoshop would be different than 14 pt in HTML?
> Which one did the WCAG mean? When I look at WebAIM's Color Contrast
> Checker,
> there is a sentence that says "I am big text." I looked at the source and
> it
> says that it is 14 pt and bold. This 14 pt is much larger than the 14 pt
> that Photoshop uses by default.
>
> 1.2 em and 1.5 em are useful units, but how big is 1 em? If it's 16 px,
> then
> 1.2 em would be about 19 px and 1.5 em would be 24 px. But one of our
> designers said he thought that 1 em was equal to 12 px, not 16 px.
>
> If choosing 14 pt in Photoshop is incorrect for following this standard,
> what should the procedure be for using Photoshop?
>
> Any help on this would be greatly appreciated. It's causing quite a stir in
> my company. ;-)
>
> Thanks,
> David
>

From: Sven Jenzer
Date: Thu, Jun 04 2009 3:45AM
Subject: Re: Color Contrast
← Previous message | No next message

i know these discussions with designers and let me add some arguments to
localise the problem:

1. Photoshop is allways showing the original size of a picture. This
size is relativ! If you have a print-quality image with 300 Pixel / Inch
and you put 14pt Text on it, this text will have an other output-size
than 14pt Text on the same picture scaled down to Screensize 72 Pixel /
Inch. The output-size depends on the definitions of the filesize and is
absolute. But the view of the file in Photoshop is not.
A Designer uses in Photoshop to display a picture in 100% - what does
this 100% mean? It means that 1 Original Pixel of the Image is one real
Pixel of the Screen you are using. Measuring this size or comparing it
with real measures is dangerous, it needs a scaling to a defined
output-size first. Beware of comparing Font-Measures with Photoshop.

2. If your AD need exact work: Use a DTP-Program like Quark, Indesign or
Illustrator (in Print-Modus !) to compare the Font-Sizes in DTP-Points.
You could print-out Arial in 14 pt and 18 pt and stick it on the frame
of the screen.

3. The font-size comparison given by Jared is supposably the simple
truth for WCAG. The hole world is relative (as we know since Albert
Einstein ;-)

best regards
Sven Jenzer


David Ashleydale schrieb:
> Hi,
>
> Sorry to keep harping on this, but could someone help me find a definitive
> answer to the points vs. pixels thing? My designers keep telling me that
> Photoshop, Illustrator, etc. are their main tools and that when the WCAG
> standard says "14 pt / bold" can be considered "large", they think they
> should be able to choose 14 pt and bold in Photoshop and have that work. I
> took a look at what Photoshop considers to be 14 pt and it's a lot smaller
> than what HTML considers to be 14 pt.
>
> But they insist that they are following the WCAG standard because they chose
> 14 pt in Photoshop.
>
> Do any of you have an explanation for this that I can give to them? Is there
> a reason that 14 pt in Photoshop would be different than 14 pt in HTML?
> Which one did the WCAG mean? When I look at WebAIM's Color Contrast Checker,
> there is a sentence that says "I am big text." I looked at the source and it
> says that it is 14 pt and bold. This 14 pt is much larger than the 14 pt
> that Photoshop uses by default.
>
> 1.2 em and 1.5 em are useful units, but how big is 1 em? If it's 16 px, then
> 1.2 em would be about 19 px and 1.5 em would be 24 px. But one of our
> designers said he thought that 1 em was equal to 12 px, not 16 px.
>
> If choosing 14 pt in Photoshop is incorrect for following this standard,
> what should the procedure be for using Photoshop?
>
> Any help on this would be greatly appreciated. It's causing quite a stir in
> my company. ;-)
>
> Thanks,
> David
>