Disclaimer: This is an experimental and open discussion to explore how we might measure typographic readability more holistically. The proposed score is a work-in-progress and not a standardized metric—yet! Your feedback and expertise are welcome to refine the concept.
Hello everyone,
The WCAG contrast score (4.5:1 ratio) is an essential standard for accessibility, but it only addresses one aspect of the problem: color . Yet, text readability also depends on its form —a criterion currently not measured in a standardized way.
Concrete example: A Times New Roman 12px text with a perfect contrast (7:1) can be less readable than Verdana 14px (5:1 contrast), simply due to its lower x-height or tight serifs. Other factors like glyph complexity , line spacing , or relative size play a key role but are not evaluated by current tools.
A Proposal: A Global Readability Score
Why not imagine an indicator that would integrate:
20% : X-height (e.g., 51% for Inter vs. 45% for Times)
15% : Glyph complexity (number of points in a ‘g’ or ‘a’)
15% : Weight and internal contrast (stroke thickness)
20% : Color contrast (WCAG)
15% : Size and line spacing
10% : Display resolution
5% : Letter spacing
Result: A score out of 100, similar to Lighthouse. Examples:
Inter Regular 16px → 92/100 (excellent readability)
Times New Roman 12px → 68/100 (needs improvement)
Why Discuss This?
To designers: Which criteria should be adjusted? Should font family (serif vs. sans-serif) or character width be included?
To developers: Would a tool (browser extension, Figma plugin) to calculate this score be useful?
To the community: Are you aware of existing work on this topic? What criteria do you think are missing?
Hello!
These are the discussions I love, and they get to the heart of design! One more thing I would add is that regardless of the absolute contrast, things change significantly if the character is light on a dark background (negative) or dark on a light background (positive).
Negative: characters appear bolder because their brightness “invades” the space around them. In printing, the opposite effect occurs because the ink tends to expand into the empty space of the character (unless, of course, a light ink is overprinted on a dark background).
Positive: the opposite of negative applies here, meaning the brightness of the background “invades” the color of the character, making it less bold. In printing, of course, the opposite is true; the ink of the character expands into the surrounding space.
To address these particular behaviors, there is a parameter in variable fonts called “grade.” To simplify (forgive me, typography experts…), it is a kind of additional “weight”; these are very subtle adjustments that are barely noticeable, optical corrections that, if used wisely, elevate typography to another level!
One factor you haven’t included is the distinctiveness of individual characters. For example, you’ve rated Inter as 92/100… but how easy is it to distinguish between the following characters?
1 (one), I (uppercase i), l (lowercase L), O (uppercase o) and 0 (zero) are useful characters for testing this distinctiveness. Check out how even a number one can look like an uppercase i and a lowercase l in this Alatsi font:
I find tools like WCAG, Lighthouse, and other scoring systems are valuable educational tools, and can be helpful in identifying “low-hanging fruit” accessibility fixes. But it can be difficult to programmatically and precisely determine the accessibility of any element of a UI, simply because we as humans are so varied in our needs.
The reading experience is shaped by a lot more than the letterforms… is the language and words familiar? Which fonts were used when you learned to read? How did you learn to write and recognise characters? Does your culture traditionally favour particular fonts? Personally, I set my ebook reader to a serif font with a large x-height because I grew up reading a lot of paperback books with fonts like this, and I find them the easiest to recognise and read at speed. But that doesn’t necessarily mean I’d find it easier to read UIs in serif fonts!
We also need variety in the fonts we use in order to convey information hierarchy… I might use a heavier weight font for emphasis or for a heading, does this mean I’d be deliberately choosing a “less readable” font? Just some food for thought
The negative and positive were the first things I learned at design school. The colors look brighter and a bit blurred if the background is dark; therefore, they look desaturated and sharper if the background is light.
I wonder if APCA considers this aspect when recommending typography (minimum size according to the style and the contrast ratio).
May we take a deeper look at the APCA’s author work
This is precisely what Stéphanie Walter, who is an accessibility and UX expert, wrote me
The readability is not only about complexity, but also about recognition. Otherwise, each traditional Chinese character would get a horrible readability score
The subjective aspect of typography seems to be the broadest. It will be difficult to consider readability with subjective aspects because they are multifactorial and culture-related.
May we start with a simple indicator to mainly educate, as you said!
To throw in another dimension to this topic - not all screens are equal. We have big 24” monitors and small mobile devices. We have modern iPhones that adjust the screen to the ambient lighting. And we have accessibility settings where users can express that they prefer more contrast, bold text, bigger text, etc (some usage stats), which apps and websites should support. Some text is meant to be read with a lot of focus, other text is more likely to be read on-the-go in a shaky subway.
Focusing hardcore on a single ratio number is illusory and a disservice to design and users.
A helpful approach is to simply take a look and see what people who can’t see well actually see. For example, in Chrome dev tools (under “More tools” → “Rendering”), you have options to emulate vision deficiencies. Set it to “Blurred vision” or “Reduced contrast”, and see if you can still read it. If not, adjust it. Accessibility settings on Apple devices are also super easy to toggle on and off. If we can so easily preview what others see, the need for some bottom-up mathematical framework is much less important.
Thanks for your message,
The context of use, such as location and device, is another variable that can’t be mastered or measured. I admit that this approach could be just “educational”, in order to help designers choose a typeface according to its use across a service or a product.
What you said about the deficiencies that can be rendered is interesting. I’m wondering if those specific renderings could be appreciated by design, for accessibility, and compliance with the law.
I think that’s up to us designers. We should be the experts on this and come up with best practices, and then also try to get regulations to follow. Just needs some motivated people to make it happen.
On the part of previewing vision deficiencies, here’s a recent example that shows the default design, the low contrast preview, and then the responsive version with the accessibility setting enabled.
Disclaimer: This is an experimental and open discussion to explore how we might measure typographic readability more holistically. The proposed score is a work-in-progress and not a standardized metric—yet! Your feedback and expertise are welcome to refine the concept.
