skip to primary navigation skip to content

Clari-Fi

Clari-Fi uses blurring to simulate the challenges of viewing small details on packs and display screens

 

Introduction to assessing adverts

Clari-Fi can be used to help evaluate the visual clarity (i.e., perceptibility) of the text and images in adverts that are intended for display on mobile and laptop screens, such as mobile banner adverts and laptop browser adverts. It helps to determine whether the critical details in these adverts will remain visible when they are viewed on their intended devices.

This webpage describes the benefits of using Clari-Fi to assess e-commerce images and how this should be done, using worked examples. The implications of an advert passing or failing the different Clari-Fi Check Levels are then presented, based on the percentage of people who cannot perceive the critical details at each level.

On this page:

Clari-Fi is available in PowerPoint, Photoshop and browser-based versions, and these can be accessed from the Assessment tools page.

Why use Clari-Fi to assess mobile and laptop adverts?

Clari-Fi speeds up the process of designing and optimising adverts for mobiles and laptop screens, because it enables the visual clarity (i.e. perceptibility) of an image to be evaluated on a large screen device. It uses blurring to simulate the challenges of viewing the image when it is displayed on a mobile or laptop screen.

The check levels within Clari-Fi are calibrated to population data, so provide a rational basis for target setting within design. The check levels are particularly suitable for specifying the level of visual clarity that a design agency’s output is expected to pass. Clari-Fi is a great preliminary check for your artwork, which can eliminate designs that are not worth testing with real users.

Important notes on checking visual clarity

1. Visual details should be checked with both Clari-Fi AND a contrast checker

  • Passing Clari-Fi means that visual details are presented at a big enough size, but visual details also need to be checked to ensure there is sufficient contrast between the foreground and background colours.
  • We recommend using the Accessible Perceptual Contrast Algorithm (APCA) to check that the Lightness contrast (Lc) is greater than 60 (ideally), or greater than 45 (as an absolute minimum).
  • Some people also have particular sensitivities to extremely high contrasts, which can cause headaches. The APCA Lightness contrast (Lc) should therefore be less than 90.
  • An APCA contrast checker is bundled together with the PowerPoint and Photoshop versions of Clari-Fi (available from the Assessment tools page), and is also freely available at contrast.tools.
  • The APCA Lightness contrast is recommended instead of the contrast ratio that appears in the Web Content Accessibility Guidelines (2.2), because the contrast ratio overestimates the contrast of black text on coloured backgrounds, and underestimates the contrast for white text on coloured backgrounds. These different methods for calculating contrast are discussed further in the article titled Does the contrast ratio actually predict the legibility of text?.

2. Visual details should also be checked with a colour vision deficiency simulator

  • Some people may have difficulty perceiving graphical details for reasons other than visual acuity. In particular, colour vision deficiency (often called colour-blindness) affects approximately 8% of men and 0.5% of women. This typically makes red details on black backgrounds extremely difficult to perceive (and various other colour combinations)
  • We recommend using a freely available colour vision deficiency simulator to check the colour combinations within your artwork, for example:

3. Clari-Fi should complement, not replace user involvement.

  • Clari-Fi is a form of expert appraisal that focuses on ensuring details are presented at a big enough size, but real users may have many other issues with perceiving visual details.
  • These include difficulties with determining where to look to find the information, and difficulties with understanding the meaning of the information.
  • Clari-Fi is a great preliminary check that can reject designs that are not worth testing with real users, but passing Clari-Fi does not replace the need validate with real users.

Worked example: Mobile adverts

The image opposite shows an example of a mobile banner advert that will be used as a worked example on this webpage. Note that you can click on this and other images on this webpage to see them at a larger size.

The image will be assessed against each of the Clari-Fi Check Levels in turn (these are named Check Levels AAA, AA and A). In particular, the assessment will focus on whether the image communicates the following key pieces of information. These have been chosen to demonstrate how a Clari-Fi assessment works at each Check Level:

  • What is the brand? (Tresemme)
  • What is the product? (Leave-in hair treatment)
  • What is the benefit? (Up to 99% less hair on your brush)
  • What is the footnote? (When using Beauty-full strength system vs a non-conditioning shampoo)

For all the assessments of this mobile advert on this page, the level of blurring is calibrated for a full-width advert, shown on a screen that is 58 mm wide, which represents an iPhone SE (2020 onwards). All assessments report the percentage of people who would not be able to perceive particular details within the image when it is displayed at this size. (See Calculation assumptions for information on how these percentages are calculated.)

Worked example: Laptop adverts

The image below shows an example of a laptop browser advert that will be used as a second worked example on this webpage. Note that you can click on this and other images on this webpage to see them at a larger size.

The image will be assessed against each of the Clari-Fi Check Levels in turn (these are named Check Levels AAA, AA and A). In particular, the assessment will focus on whether the image communicates the following key pieces of information. These have been chosen to demonstrate how a Clari-Fi assessment works at each Check Level:

  • What is the brand? (Tresemme)
  • What are the products? (Heat defence hair products)
  • What is the benefits? (Salon quality in your hands every day, Up to 230°C heat protection)

For all the assessments of this laptop advert on this page, the level of blurring is calibrated for an advert that is 910 pixels wide on a laptop screen with 1920 x 1080 pixels and 13 inches diagonal, with 100% zoom and no display scaling. This is equivalent to 13.6cm wide. All assessments report the percentage of people who would not be able to perceive particular details within the image when it is displayed at this size. (See Calculation assumptions for information on how these percentages are calculated.)

Check Level AAA

Check Level AAA applies a moderate amount of blurring. If the visual details are ‘only just’ perceptible at Check Level AAA, then about 28% of people cannot perceive these details1.

If the visual details are bigger than the bare minimum needed to pass Level AAA, then less than 28% of people cannot perceive these details1.

Considering the blurred version of the mobile banner advert shown opposite:

  • Reading the text in the tagline ‘Up to 99% less hair on your brush’ passes Check Level AAA, so less than 28% of people cannot perceive these details1.
  • The other messages (brand, product type & footnote) fail at Check Level AAA, so these messages will be assessed against Check Level AA.

Considering the blurred version of the laptop banner advert shown below:

  • What is the brand (Tresemme) and What is the benefit (Salon quality in your hands everyday) pass at Level AAA, so less than 28% of people cannot perceive these details1
  • The other messages (Heat defence hair products, Up to 230°C heat protection) fail at Level AAA, so will now be assessed against Level AA.

Footnotes

  1. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see, while wearing any glasses or contact lenses that they usually wear for the majority of the day. See the Calculation assumptions panel for further details.

Check Level AA

Check Level AA applies a minimal amount of blurring. If the visual details are ‘only just’ perceptible at Check Level AA, then about 46% of people won’t be able to perceive these details (see Calculation assumptions).

If the visual details are bigger than the bare minimum needed to pass Level AA, but not big enough to pass at Level AAA, then between 28% and 46% of people won’t be able to perceive these details.

Considering the blurred version of the mobile banner advert opposite: the brand, product type & footnote all fail at Check Level AA, so these messages will be assessed against Check Level AA.

Considering the blurred version of the laptop browser advert shown below:

  • What is the benefit (Up to 230°C heat protection) passes Check Level AA, so between 28% and 46% of people won’t be able to perceive these details..
  • What are the products (Heat defence hair products) fails at Check Level AA, so these messages will be assessed against Check Level A.

Footnotes

  1. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see, while wearing any glasses or contact lenses that they usually wear for the majority of the day. See the Calculation assumptions panel for further details.

Check Level A

Check Level A applies an extremely small amount of blurring. If the visual details are ‘only just’ perceptible at Check Level A, then those details will ‘just about’ render properly on the screen they are intended for1. These details may still be extremely difficult or impossible to see for most people, and they may be smaller than the smallest test chart letters that we have population data for.

Details that fail Check Level A are unlikely to render properly on the screen they are intended for1, so even if you had a magnifying glass, they still wouldn’t be perceivable.

If the visual details are bigger than the bare minimum needed to pass Level A, but not big enough to pass at Level AA, then between 46% and 100% of people cannot perceive these details2.

Considering the blurred version of the mobile banner advert opposite:

  • 'What is the brand?' (Tresemme) and 'What is the footnote?' (When using Beauty-full strength system vs a non-conditioning shampoo) both pass at Check Level A, so between 46% and 100% of people cannot perceive these details2.
  • What is the product type (Leave-in treatment) fails Check Level A, so this text wouldn't be perceivable, even if you had a magnifying glass.

Considering the blurred version of the laptop browser advert shown below:

  • What are the products? (Heat defence hair products) passes Check Level A. The words ‘heat defence’ are perceptible on the right-hand bottle, and the shape of the bottle indicates that it’s a spray, so between 46% and 100% of people cannot perceive these details2.
  • The descriptive text on the left-hand bottle fails Check Level A, so this text wouldn't be perceivable, even if you had a magnifying glass.

Footnotes

  1. Details that just pass Check Level A are on the borderline of rendering properly on their intended viewing device, because these details are approximately equivalent to test chart letters that have a stroke thickness of 0.25pt, and these strokes would have a thickness of:
    • 1.5 screen pixels on a typical high quality mobile phone screen (440 ppi)
    • 0.6 screen pixels on a 13 inch laptop at 1920x1080 resolution
  2. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see, while wearing any glasses or contact lenses that they usually wear for the majority of the day. See the Calculation assumptions panel for further details.

Who should perform Clari-Fi assessments

Using Clari-Fi to assess media adverts is more objective than an assessor looking at the digital artwork directly, and deciding if they think the critical messages are communicated clearly enough.

However, some degree of subjectivity remains in the process, because the assessor's familiarity with the brand portfolio can influence the details that they need to perceive in order to determine the adverts key messages. To mitigate this issue, the assessments should be performed by someone who hasn't seen the advert before, and whose knowledge of the brand portfolio is similar to that of the adverts target market.

Nevertheless, the person who designed the advert will still gain considerable insight from performing the Clari-Fi assessment themselves, as long as they:

  • are consciously aware of the advantage that their prior experience gives them in perceiving the details that they are assessing;
  • do their best to mitigate this issue when performing the assessments.

Having the designer of the advert perform the Clari-Fi assessment allows for very fast iteration cycles of improvement and testing. However, it's important that these Clari-Fi assessments are validated by someone else who hasn't worked on the project, and ultimately validated with real users, as described further in the panel titled Important notes.

The assessor's eyesight ability doesn't usually matter, as long as their vision is good enough to drive, and they don't have any specific issues with near vision (wearing glasses or contact lenses if needed).

How to perform a Clari-Fi assessment

Clari-Fi is available in PowerPoint, Photoshop and browser-based versions, and these can be accessed from the Assessment tools page.

To assess a mobile or laptop advert at Check Level AAA:

  1. Recruit an appropriate assessor, as described in the panel titled Who should perform Clari-Fi assessments?
  2. Set up a laptop or monitor screen for the assessment, so that the ‘Check Level AAA’ version of the image is visible on the screen (at the largest possible size), and nothing else.
  3. Show this image to the assessor. The exact size at which the image is presented, how far away the monitor is and whether the assessor has perfect eyesight don’t usually matter. Within reasonable variations of these parameters, it is the applied blurring that limits the graphical details that can be perceived.
  4. Ask the assessor to look at this image, and see if they can identify the key messages that the advert should communicate.
  5. Each of these messages passes Check Level AAA if the assessor can determine them from the blurred version of the image.

If any of the messages fail at Level AAA, this procedure can be repeated to test at Check Level AA, and then again at A.

It is fine to test at Level AAA first, and then repeat the procedure to test at Level AA. However, it is not suitable to test at AA and then subsequently test at AAA, because the details that you have already seen in the AA image will subconsciously assist your visual perception of the AAA image.

Taking a population perspective

Firstly, follow the assessment procedure, which was described previously in the panel titled How to perform a Clari-Fi assessment. A summarised description of this procedure is:

  1. Recruit an appropriate assessor, as described in the panel titled Who should perform Clari-Fi assessments?
  2. Ask them to look at the Check Level AAA version of the image, and see if they can identify the key messages in the advert.
  3. If any of the messages fail at Level AAA, then test again at Check Level AA, and then again at A.

Having completed this procedure, consult the bullet point list below:

  • If the visual details are bigger than the bare minimum needed to pass Level AAA,
    then less than 28% of people cannot perceive these details1.
  • If the visual details are bigger than the bare minimum needed to pass Level AA,
    but not big enough to pass at Level AAA,
    then between 28 and 46% of people cannot perceive these details1.
  • If the visual details are bigger than the bare minimum needed to pass Level A,
    but not big enough to pass at Level AA,
    then between 46 and 100% of people cannot perceive these details1.
  • If the visual details are not big enough to pass at Level A,
    then they are unlikely to render properly on the intended viewing device2.

Footnotes

  1. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see, while wearing any glasses or contact lenses that they usually wear for the majority of the day. See the Calculation assumptions panel for further details.
  2. 1. Details that just pass Check Level A are on the borderline of rendering properly on their intended viewing device, because these details are approximately equivalent to test chart letters that have a stroke thickness of 0.25pt, and these strokes would have a thickness of:
    • 1.5 screen pixels on a typical high quality mobile phone screen (440 ppi)
    • 0.6 screen pixels on a 13 inch laptop at 1920x1080 resolution
    .

Calculation assumptions

Population percentages refer to people who cannot perceive particular visual details, because they are too small. Importantly, there are many other reasons that might cause people to have difficulty perceiving these details. Clari-Fi assessments should be accompanied by checking contrast, simulating colour vision deficiency, and testing with users, as described in the Important notes section (earlier on this page).

All population figures presented on this page are estimated based on a household based UK survey1 with 362 participants conducted in 2010, which tested people’s near vision. To find out more about the survey, see the page titled Relating the Clari-Fi levels to population data.

The test intended to measure people’s ‘real-world’ near vision ability (i.e. the level of near vision ability that they have for the majority of the day). So, if participants were wearing glasses or contact lenses before the test, then they kept them on. If they weren’t wearing any glasses or contact lenses before the test, then the test was conducted without glasses or contact lenses.

On this basis, all population figures on this page refer to the percentage of people who cannot perceive particular details ‘natively’, without any assistive strategies2 or assistive devices3. This matches the aim of inclusive solutions, which shouldn’t require people to use assistive strategies or devices.

All assessments relate to perceiving particular details within an advert, when it is displayed on a mobile screen that is 58 mm (e.g. iphone SE, 2020 onwards), or on a 13" laptop screen that is 1920x1080 resolution, with no zooming or display scaling.

Footnotes

  1. Towards better design, 2010. [data collection]. UK Data Service, SN: 6997. Available at: dx.doi.org/10.5255/UKDA-SN-6997-1
  2. One common assistive strategy is to use a mobile phone, either as a portable magnifier, or by taking a photo and then zooming in. For people who are heavily shortsighted, another possible assistive strategy is to drop the glasses down low on the nose, look over the top of them, and hold the stimulus very close to the nose.
  3. Common assistive devices include handheld magnifiers and reading glasses.

Feedback

We would welcome your feedback on this page:

Your name:


Your email:


I would like to receive the Inclusive Design Toolkit news bulletin. This bulletin showcases people’s achievements with inclusive design tools, and highlights new tools. It comes out once or twice a year.

I would be interested in contributing to the Inclusive Design Toolkit news bulletin.

I would like a FREE activation code for the Inclusive Design Toolkit's impairment simulator software.

Your comments:


Please leave this field blank (it's a spam trap):

Privacy policy. If your feedback comments warrant follow-up communication, we will send you an email using the details you have provided. Feedback comments are anonymized and then stored on our file server. If you select the option to receive or contribute to the news bulletin, we will store your name and email address on our file server for the purposes of managing your subscription. You can unsubscribe and have your details deleted at any time, by using our Unsubscribe form. If you select the option to receive an activation code, we will store your name and email address on our fileserver indefinitely. This information will only be used to contact you for the specific purpose that you have indicated; it will not be shared. We use this personal information with your consent, which you can withdraw at any time.

Read more about how we use your personal data. Any e-mails that are sent or received are stored on our mail server for up to 24 months.