Definition of Clear Text

The Code of Practice refers to “clear” or “clearly” in many places.

Where this applies to on-screen text, our working definition of “clear” is:

  1. Real font-size of at least 14 pixels at 100% zoom.
  2. Minimum 70% tonal contrast.
  3. Text will not be in ALL CAPS.
  4. Maximum two sentences per paragraph.

How to Discover Real Font-Size

font-size-chrome-inspect-elementOne way to find this is to use Chrome’s built-in “Inspect Element” feature.

  1. Right-click (or option-click) on the relevant text.
  2. Select “Inspect Element” menu item.
  3. Select the “Computed” tab.
  4. Scroll to “Font-size” if necessary.

The example shown here would not quite be compliant with the definition of “clear” text.

How to Discover Tonal Contrast

Use a graphics package or color picker plugin  (available for most web browsers) to sample the HSL values for the foreground text and its background tone.

Assuming values are expressed on a 0-100 scale, find the difference of the L (Luminosity) value between the darkest tone in the text and its background. If the difference between the higher and lower values is at least 60 (60%), we say that tonal contrast is sufficient.

This example shows the color picker in pixlr editor (a free online graphics package). It shows that the L value is 62, against a white background (L:100), giving a tonal contrast of only 38%, which is insufficient to be described as “clear”.



Examples of Compliant and Non-compliant Text

Note that individual end-users have control over the default settings of their browsers and email clients, which may override the marketer’s settings. These examples assume that default settings are used.

Non-Compliant Example

This “small print” is featured at the bottom of a marketing email sent by Eben Pagan, shown at actual size (100% zoom).

eben-pagan-email-small-printThe text evaluates as only 10.667 pixels using Chrome’s Inspect Element tool. This is far too small to be described as “clear”.

Additionally, the tonal contrast (as shown in the screenshot above) is only 38%, which is also non-compliant.

The text shown does have no more than 2 sentences per paragraph.

Compliant Example

not-so-fine-print-frank-kernThis comes from an email from Frank Kern.

The font size evaluates at 18.667 pixels, which is compliant.

The text color is black, giving a perfect 100% tonal contrast against a white background.

The difference in readability is clear.

Click here to add a comment

Leave a comment: