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 apps and websites

Clari-Fi can be used to help evaluate the visual clarity (i.e. perceptibility) of apps and websites on mobiles and laptops, to determine whether the text and icons within are presented at a big enough size.

This webpage describes the benefits of using Clari-Fi to assess apps and websites, and how this should be done, using a worked example. The implications of passing or failing the different Clari-Fi Levels are then presented, according to the percentage of people who will not be able to perceive the text and icons within the website.

On this page:

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

Why use Clari-Fi to assess apps and websites?

Legislation in many countries requires that products and services are accessible. For example, the European Accessibility Act applies to products and services that are made available to EU citizens after June 2025, including (but not limited to) ticketing and check-in machines; smartphones; transport services; banking services and e-commerce. The Act states that non-compliance will lead to ‘effective, proportionate and dissuasive’ penalties, in addition to requiring remedial action.

Among other things, the Act specifies that: ‘Information shall be presented in fonts of adequate size and suitable shape, taking into account foreseeable conditions of use, and using sufficient contrast’. A reasonable interpretation of this statement is: ‘users who are not visually impaired1 do not need to use assistive strategies2 or assistive devices3 to perceive the information’.

Clari-Fi provides a simple, semi-objective method for determining whether text and icons within apps and websites are presented at an adequate size.

In particular, if visual details fail The 20% Level of Clari-Fi (described further down this page), then some users who are not visually impaired1 will probably need to use assistive strategies2 or assistive devices3 to perceive those visual details.

Any interface that contains essential text or icons that fail The 20% Level is therefore unlikely to be compliant with the European Accessibility Act.

Furthermore, the different levels of Clari-Fi (described further down this page) are calibrated to population data, and so provide a rational basis for target setting within design. These 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.

How does Clari-Fi relate to the Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG 2.2) defines how to make web content more accessible to people with disabilities. Given this stated scope:

  • The primary methods for testing website text in WCAG2.2 include ensuring that it:
    • Is compatible with screen readers;
    • Is zoomable by the user;
    • Has sufficient contrast difference between foreground and background colours.
  • The primary methods for testing icons include ensuring that they:
    • Are described by alternative text;
    • Have sufficient contrast difference between foreground and background colours.

However, WCAG2.2 does not contain a specification for a minimum acceptable size of text and icons, perhaps because this isn't the highest priority for people with disabilities. It is thus possible to achieve the maximum compliance level of WCAG2.2 (AAA) using high contrast text and icons that are extremely small, as shown in the example below.

Conversely, Clari-Fi intends to make web content more accessible to all people, especially those with mild vision issues, like age-related long sightedness, which are not severe enough to be considered as a disability. Given this stated scope, the Clari-Fi helps to ensure that users who are not visually impaired1 do not need to use assistive strategies2 or assistive devices3 to perceive text and icons within apps and websites.

So, to a simple approximation, Clari-Fi complements WCAG2.2, and passing both means that your content will be more accessible to people with disabilities, and also more accessible to people with mild vision issues like age-related long sightedness.

Footnotes

  1. ‘Not visually impaired’ is defined in the WHO World report on vision as 20 / 40 vision (or better). 20 / 40 vision means the person can ‘only just’ perceive test chart letters that are 20 feet away, where the strokes that make up the letters subtend an angle of 2 arc minutes (0.033 degrees) on the retina. In real world terms, 20 / 40 is about the borderline for being able to drive, but it's not severe enough to be classified as visually impaired.
  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.

Important notes on checking visual clarity

1. Text and icons should be checked with both Clari-Fi AND a contrast checker

  • Passing Clari-Fi means that text and icons are presented at a big enough size, but they 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. Text and icons should also be checked with a colour vision deficiency simulator

  • Some people may have difficulty perceiving text and icons 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, such as: the Inclusive design toolkit impairment simulator or Myndex impairment simulator.

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

  • Clari-Fi is a form of expert appraisal that focuses on ensuring text and icons are presented at a big enough size, but real users may have many other issues with perceiving text and icons.
  • 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 to validate with real users.

Worked example

The next few panels on this webpage present a worked example for the fictitious museum map shown opposite. Text within this map appears at 3 different sizes:

  • Heading size (e.g. ‘The Museum of Interesting Facts’);
  • Large label size (e.g. ‘First Exhibition Hall’);
  • Small label size (e.g. ‘Lecture Theatre’).

Each of these text sizes will be assessed for the worked example. Additionally, there are also various icons presented at various different sizes, for example:

  • The information icon.
  • The male, female and wheelchair icons for the toilets

Clari-Fi can also be used to assess apps and websites on laptops, but this isn’t shown within this worked example

The 1% Level

The 1% Level applies a degree of blurring that simulates someone who is roughly in the middle of the range considered as moderate visual impairment1.

If the text and icons are ‘only just’ perceptible at The 1% Level, then about 1% of people cannot perceive these details2.

If the text and icons are bigger than the bare minimum needed to pass The 1% Level, then less than 1% of people cannot perceive these details2.

Considering the blurred version of the image shown opposite:

  • The icon of the building in the title banner is ‘only just’ perceptible at The 1% Level, so about 1% of people cannot perceive this icon2.
  • All of the other text and icons fail at The 1% Level, so these will be assessed in the next panel.

Footnotes

  1. Moderate visual impairment is defined in the WHO World report on vision as 20 / 80 to 20 / 200 vision. The 1% Level is approximately equivalent to 20 / 140 vision, which means the person can ‘only just’ perceive test chart letters that are 20 feet away, where the strokes that make up the letters subtend an angle of 7 arc minutes (0.117 degrees) on the retina. For apps and websites, a near vision equivalent is needed, and the best available approximation is to assume the same threshold visual angle, and a viewing distance of 40cm (1.3 feet).
  2. This refers to the percentage of people who cannot perceive the text and icons, 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.

The 4% Level

The 4% Level applies a degree of blurring that simulates someone who is at the least impaired end of the range considered as moderate visual impairment1. The 4% Level is also approximately equivalent to someone with good near vision wearing 3 pairs of Cambridge Simulation Glasses.

If the text and icons are ‘only just’ perceptible at The 4% Level, then about 4% of people cannot perceive these details2.

If the text and icons are bigger than the bare minimum needed to pass The 4% Level, but not big enough to pass The 1% Level, then between 1% and 4% of people cannot perceive these details2.

Considering the blurred version of the image shown opposite:

  • The title (‘The Museum of Interesting Facts’) is ‘only just’ perceptible at The 4% Level, so about 4% of people cannot perceive this text2.
  • All of the other text and icons fail at The 4% Level, so these will be assessed in the next panel.

Footnotes

  1. Moderate visual impairment is defined in the WHO World report on vision as 20 / 80 to 20 / 200 vision. The 4% level is approximately equivalent to 20 / 90 vision, which means the person can ‘only just’ perceive test chart letters that are 20 feet away, where the strokes that make up the letters subtend an angle of 4.5 arc minutes (0.075 degrees) on the retina. For apps and websites, a near vision equivalent is needed, and the best available approximation is to assume the same threshold visual angle, and a viewing distance of 40cm (1.3 feet).
  2. This refers to the percentage of people who cannot perceive the text and icons, 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.

The 20% Level

The 20% Level applies a degree of blurring that simulates someone who is not visually impaired1, but is at the limit of the range considered as normal vision. The 20% Level is approximately equivalent to someone with good near vision wearing 2 pairs of Cambridge Simulation Glasses.

If the text and icons are ‘only just’ perceptible at The 20% Level, then about 20% of people cannot perceive these details2.

If the text and icons are bigger than the bare minimum needed to pass The 20% Level, but not big enough to pass The 4% Level, then between 4% and 20% of people cannot perceive these details2.

Furthermore, if any text or icons fail The 20% Level, then some users who are not visually impaired1 will probably need to use assistive strategies3 or assistive devices4 to perceive those visual details.

Any interface that contains essential text or icons that fail The 20% Level is therefore unlikely to be compliant with the European Accessibility Act, as discussed earlier within the panel titled Why use Clari-Fi?.

Considering the worked example shown opposite:

  • The large labels (e.g. ‘First Exhibition Hall’) are big enough to pass The 20% Level but not big enough to pass The 4% Level, so between 4% and 20% of people cannot perceive this text2.
  • The information icon is ‘only just’ recognisable as an ‘i’ at The 20% Level, so about 20% of people cannot perceive this icon2. The large version of the bicycle icons is similarly just about recognisable at this level.
  • Most of the other text and icons fail The 20% Level, so these will be assessed in the next panel.

Footnotes

  1. 'Not visually impaired’ is defined in the WHO World report on vision as 20 / 40 vision (or better). 20 / 40 vision means the person can ‘only just’ perceive test chart letters that are 20 feet away, where the strokes that make up the letters subtend an angle of 2 arc minutes (0.033 degrees) on the retina. In real world terms, 20 / 40 vision is about the borderline for being able to drive, but it's not severe enough to be classified as visually impaired. For apps and websites, a near vision equivalent is needed, and the best available approximation is to assume the same threshold visual angle, and a viewing distance of 40cm (1.3 feet).
  2. This refers to the percentage of people who cannot perceive the text and icons, 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.
  3. 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.
  4. Common assistive devices include handheld magnifiers and reading glasses.

The 50% Level

The 50% Level applies a degree of blurring that simulates a level of vision ability where roughly half the population have better vision, and roughly half have worse vision. The 50% Level is also approximately equivalent to someone with good near vision wearing 1 pair of Cambridge Simulation Glasses.

If the text and icons are ‘only just’ perceptible at The 50% Level, then about 50% of people cannot perceive these details1.

If the text and icons are bigger than the bare minimum needed to pass The 50% Level, but not big enough to pass The 20% Level, then between 20% and 50% of people cannot perceive these details1.

If the text and icons are not big enough to pass The 50% Level, then between 50% and 100% of people cannot perceive these details.

Considering the worked example shown opposite:

  • The small labels (e.g. ‘Lecture Theatre’), and the mug icon are big enough to pass The 50% Level, but not big enough to pass The 20% Level, so between 20% and 50% of people cannot perceive these features1.
  • The icons for male and female toilets are recognisable as people at The 50% Level, but it is not possible to distinguish which one is which. In this particular context, distinguishing the male and female icons from each other is probably not essential to identify that these icons represent toilets, so these icons could be considered to pass the 50% Level. Even so, it would be better if these icons were redesigned to make them more distinctive from each other.

Footnotes

  1. This refers to the percentage of people who cannot perceive the text and icons, 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.

Setting targets for inclusive apps and websites

For most apps and websites, The 20% Level is an appropriate target for visual clarity for both mobile and laptop views (when they are viewed with the default settings of zoom and text size). The reasons for choosing this level are discussed in the panel titled Why use Clari-Fi? (earlier on this page).

The relationship between the 20%, 4% and 1% levels is as follows:

  • The 4% Level requires things to be 2.2 times larger than The 20% Level.
  • The 1% Level requires things to be 3.3 times larger than The 20% Level.

So, if the laptop layout of an app or website passes The 20% Level at 100% zoom, then it will pass The 4% Level at 220% zoom, and it will pass The 1% Level at 330% zoom.

Best practice websites should support zoom levels from 100 to 400%, within a browser window that is 1280 pixels wide (these values are specified within Reflow success criterion of the Web Content Accessibility Guidelines). This criterion is usually best achieved by configuring the website so that, as the zoom level increases, for a browser window that is 1280 pixels wide:

  1. The website switches to mobile layout before the laptop layout breaks down;
  2. The website remains usable at 400% zoom (i.e. all content is visible and the layout is stable).

Who should perform Clari-Fi assessments?

Using Clari-Fi to assess text and icons in apps and websites is more objective than an assessor looking at the app or website directly, and deciding if they think the text and icons are big enough.

However, some degree of subjectivity remains in the process, because the assessor's familiarity with the app or website (and its wider context) can influence the details that they need to perceive in order to successfully interact with the app or website.

For example, if Clari-Fi was being used to assess a map for a building, then the map shouldn't be assessed by the person that designed it, and it shouldn't be assessed by someone who already knows their way around the building. Instead, it should be assessed by someone who hasn't seen the map before, and whose knowledge of the building is similar to that of the intended users of the map.

Nevertheless, the person who designed the map 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 visual materials 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 an app or website at The 1% Level:

  1. Take a screenshot of the app or website, ideally on both a mobile and a laptop. For the laptop screenshot, ensure that the display resolution is 1920 x 1080 pixels, and the display scaling and zoom are both set to 100%. The physical size of the mobile and laptop screens does not matter.
  2. Recruit an appropriate assessor, as described in the panel titled Who should perform Clari-Fi assessments?
  3. Set up a laptop or monitor screen for the assessment, so that The 1% Level version of the image is visible on the screen (at the largest possible size), and nothing else.
  4. 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.
  5. Ask the assessor to look at this image, and see if they can successfully perceive the critical messages that are necessary to successfully interact with the app or website.
  6. Each of these messages passes The 1% Level if the assessor can determine them from the blurred version of the image.
  7. Repeat steps 3 to 6 for the image from the laptop screenshot.

If any of the messages fail at The 1% Level, this procedure can be repeated to test at the other levels that apply successively less degrees of blurring.

It is fine to repeat the test procedure multiple times at successively less degrees of blurring. However, it is never suitable to repeat the test at a level that applies more severe blurring than the previous test because the details that you have already seen in the mildly blurred version of the image will subconsciously assist your perception of the more severely blurred version

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 1% Level blurred version of the image, and see if they can perceive the critical messages that the image intends to communicate.
  3. If any of the messages fail at The 1% Level, then test again at the other levels that apply successively less degrees of blurring.

Having completed this procedure, consult the statements below, which relate the outcome of this assessment to population data.

  • If the visual details are bigger than the bare minimum needed to pass The 1% Level
    then less than 1% of people cannot perceive these details1.
  • If the visual details are bigger than the bare minimum needed to pass The 4% Level,
    but not big enough to pass The 1% Level,
    then between 1 and 4% of people cannot perceive these details1.
  • If the visual details are bigger than the bare minimum needed to pass The 20% Level,
    but not big enough to pass The 4% Level,
    then between 4 and 20% of people cannot perceive these details1.
  • If the visual details are bigger than the bare minimum needed to pass The 50% Level,
    but not big enough to pass The 20% Level,
    then between 20 and 50% of people cannot perceive these details1.
  • If the visual details are not big enough to pass The 50% Level,
    then more than 50% of people cannot perceive these details1.

Footnotes

  1. This refers to the percentage of people who cannot perceive the details, because they are too small for them to see at the specified viewing distance, 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.

Calculation assumptions

Population percentages refer to people who cannot perceive particular text and icons, 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.

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.