The Web Content Accessibilty Guidelines 2.0 April 30th Candidate Recommendation defines large text in
this glossary entry.
If you are designing your own site, you can just play-it-safe and treat everything as small-scale text unless it is very large and bold. But if you are advising clients on whether they need to make corrections to a pre-existing site, you really need to know if something is large-scale text or not. This is because large-scale text has less-strict contrast requirements in the new WCAG guidelines.
Below, I use css and points to define some text as 14 point bold and some text as 18 point not bold. These are the two minimum sizes for text to be considered large-scale by the definition mentioned. This text seems to stay that size regardless of the screen resolution used. The numeral 1 shown in 18 point text is one fourth inch high, if a ruler is held up to the screen.
On devices where there are 72 pixels in an inch, this should be the same as 14 pixels bold and 18 pixels. But we can't count on screens being like that. On my screen, a div sized to be 72 pixels is smaller than a div sized as 1 inch. The one inch div measures one inch if I hold up a ruler to the screen. I believe the items sized with points and inches will be same when a ruler is held up to the screen for all screens where the software involved is working correctly. However, items sized in pixels and ems will vary.
Below I've placed three div boxes on the screen. One is sized using pixels to 72 pixels. The next is sized to 96 pixels. The third is sized using inches to 1 inch. From what I've seen so far, the 1 inch box stays the same size across screens. The 72 pixel and 96 pixel boxes vary.
To match the box experiment, on this particular screen, which is 96 dpi like many modern screens, fonts sized with pixels are smaller than those sized with points. I expect the fonts sized with pixels to vary screen to screen while the points should remain the same, if the software is operating correctly. Below some text is shown sized with pixels. On my screen, it is smaller than text sized with points.
Now, if I use software, like the Windows XP Operating system, to increase dpi from 92 pixels to 120 pixels, the software can't really do anything about the size of pixels on my screen. So it simply makes inches larger. In other words, it now draws inches using 120 pixels. When I hold a ruler up to the 1 inch div, it is actually 1.25 inches. Similarly any inch-based measurements, like points, are drawn with 25% more pixels as well and become larger. However, any measurements based on pixels stays the same size as before I used software to change the dpi. This is because the hardware pixels are still the same size. The 96 pixel div still measures 1 inch if I hold my ruler up to the screen, because the screen is still a 96 dpi screen.
Points should work the same way as a point should be 1/72 of an inch. To make this easier to test, I'll create a 72 point font below:
However, if we use hardware to increase the dpi, we'll get the opposite effect: instead of inch-based measurements changing and pixel-based measurements staying the same, we'll see inch-based measurements staying the same and pixel-based measurements changing. This seems to me, more like the real definition of dpi. There are physically more dots in an inch, so the pixels are actually smaller, so items sized using pixels are also smaller. Items sized based on inches stay the same, because calculations are made to achieve a specific real-world length.
Finally, I should mention using software to change screen resolution. In this case, at least on my current set up, everything is changed in proportion. For example, I changed the resolution to a low 800 X 600 and everything increased in size. But the inch-length div and 96 pixel-length div remained the same size, reflecting the underlying 96 dpi. The software simulated both inches and pixels as larger.
96 dpi appears to the most common screen resolution these days. I checked a Mac OS X laptop, a Windows XP desktop, and a Windows Vista Ultra Mobile PC. All used 96 dpi. And the guidelines' definition of large scale text includes, "This success criterion is based on common pixel sizes available today." So, it appears, you can do the math based on 96 dpi or you can make sure that you are using 96 dpi and then compare the font in question a font that is set to be 14 point bold or 18 point not bold. If you are using 96 dpi, a div set to 1-inch should be the same size as a div set to 96 pixels. If your screen resolution is set to the optimum resolution for your monitor, then that will actually measure 1 inch if you hold a ruler up the screen, but that doesn't really matter.
So, sizing in pixels at 96 dpi, "at least 18 point or 14 point bold" is at least (18 times 1.25, rounded up to nearest pixel) 23 pixels or (14 times 1.25, rounded up to nearest pixel) 18 pixels bold.
Many "accessible" web sites don't zoom well.
Zoom without horizontal scrolling is important for accessibility and for mobilization.
Screens getting smaller is the same, after all, as contents of the screens getting larger. It is all about the size of the content increasing in proportion to the size of the screen.
Ideally, without changing user perferences, without special tools, without custom style sheets, Web sites could be zoomed using standard browser features.
Reader | wbr ok? |
---|---|
IBM HPR 3.04 | No |
JAWs 7.0 | Yes |