Pixels and Picas and Points -- Oh My!

(Why font size is so problematic for ADA compliance)

The New Design!

You've been in this situation before, right?

Your marketing department hired a nationally known design agency for an important project that would set the design direction for a number different campaigns and supporting collateral. The presentation is spectacular (because they're really good at making great presentations). The stakeholders swoon, and the executives are completely on board.

Everyone agrees, it looks great. All that stands between your company and this amazing new direction is your digital team to apply these designs to the website and mobile apps. And, of course, the design agency, being as helpful as possible, provides all of the digital assets.

ADA Requirements

We'll set aside the work from prototype to production to get a design into code and a content management system with business logic, authentication, analytics, etc. The design assets themselves, you find, don't meet ADA requirements -- despite the fact that the design agency swore on everything precious to them that they understood WCAG 2.0 AA standards like the back of their hands.

Here's a requirement that seems to trip up design agencies pretty much every single time:

1.4.3 Contrast (Minimum):The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA):

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Here is one of the notes for this standard: "18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio."

And the design agency says that they are using 18 point text -- and they show you in their design tool, it's size 18, so they say that their 18 point text can use the lower 3:1 contrast ratio.

Physical vs Digital Measures

But this is where our designers born in the digital age could use a lesson those of us who have been around since the old days of pica poles, light tables, and rulers. A "point" is a physical measure, as are picas and inches. 12 points make 1 pica, and 6 picas make an inch. An inch is 72 points. This is true whether you are in New York at home, Seoul on a laptop, or Berlin on a phone: an inch is an inch is an inch, and a point is a point is a point.

On the other hand, a "pixel" is a digital measure. A pixel on the huge screen in Times Square is a different size from a pixel on your laptop in Seoul, which is different from a pixel on your phone in Berlin. The size of a pixel depends on the resolution of your screen. For example, if your monitor is set at 96 DPI, then 1 physical inch on your screen is about 100 pixels (the exact conversion is 100 pixels = 1.04166 inches). But if you're using 150 DPI then 1 physical inch is 150 pixels. Of course, if you're using a vintage Mac (Mac, Mac512, Mac Plus, or Mac SE) with 9 inch black and white screen, then you are using a 72 DPI monitor and you have true WYSIWYG, and 1 inch on the screen really is 1 inch in a printed paper.

ADA requirements require designers to translate digital measures into physical ones. After all, as much as we love our phones, we are still physical beings. We still live and exist in a physical world. And our eyes are designed to see things in physical units.

Furthermore, you can't design for your physical environment but the end-user's. If you assume a baseline of 130 DPI for the end-user environment (which is a pretty reasonable setting for many laptop users) "Large-scale" text would have to be about 30 points on that monitor, not 18.

And if you need to optimize for phone, it's even more. Here's a quick snapshot comparing 18 point Times New Roman printed on paper vs on my Samsung Note 8:

Learnings

There are a few morals to this story. One is unless your "Large-scale" text is truly very large, use the 4.5:1 contrast ratio, not the 3:1. And, really, just stay away from 3:1 in general. You want your content to be readable. Don't make that hard for your users. You don't want your interaction design to be hard to navigate, why would you want to make your content hard to read. Let's apply the same principles we use for interaction design to content. Make it easy for the end user in the end user's actual journey.

It doesn't matter if it looks perfectly readable to you on your 32" retina monitor. Most end users aren't graphics designers using 32" monitors. They're probably using a 15" laptop (less than 1/2 the size) or a phone. Use 4.5:1 as your MINIMUM standard. In fact, if possible try to get up to the 7:1 ratio which would meet AAA standards.

Also, I have learned to dig into vendor representations about what they understand about ADA. Take a look at their other work -- does it look like they really apply those ADA standards there? Ask them to explain some of these standards and guidelines to you, so that you can be sure you both have the same understanding of them.

And, of course, get specific language about ADA requirements (WCAG 2.0 or 2.1 and A, AA, or AAA) into the SOW or contract.