Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

středa 20. června 2012

How to measure font size on a web page

Web Content Accessibility Guidelines 2.0 methodology uses relative luminance algorithm for the evaluation of contrast. This algorithm is based not only on used colors, but also on size of text. The visual presentation of text and images of text have a contrast ratio of at least 4.5:1 for text size up to 18 point or 14 point bold or a contrast ratio of at least 3:1 for text size bigger than 18 point or 14 point bold.

It sounds logical and at first sight there are no difficulties. Especially in cases, when we work with text, size of which is defined in points. We launch for example Colour Contrast Analyzer, measure the values and we get the result. But what to do when the text size is defined in other units - em, pixels, percents...? In what case does the text have its size 18 point or 14 point bold? This is what we have to know to determine which value of contrast ratio (4.5:1 ar 3:1) is relevant for us.

Some, yet not an easy-to-use solution offers the large scale (text) definition from WCAG 2.0:

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.

This paragraph contains the answer to question how we can easily convert various units. But still we don´t know, how to easily measure size of a particular text where we want to evaluate its contrast.

In practice I use the solution based on add-on Context Font for Firefox and conversion table Convert em,px,pt and % in CSS. Because Context Font add-on measures sizes in pixels, it´s necessary to convert sizes 14 and 18 points to pixels. Then the visual presentation of text and images of text have a contrast ratio of at least 4.5:1 for text size up to 24 pixels (18 points, 1.5em, 150%) or 19 pixels (14 points, 1.2em, 120%) bold or a contrast ratio of at least 3:1 for text size bigger than 24 pixels or 19 pixels bold.

I realize that the values are rounded, but based on my own experience I don´t think that this rounding has any negative impact on the accessibility of the text.

Žádné komentáře: