Visual customization options from Eye-Able

Share this post:

Eye-Able different logos with the accessibility manikin

The assistance software Eye-Able allows a large number of adjustments. On the one hand the functions are adaptable to the respective Websiteon the other hand the appearance of Eye-Able can be modified. Which possibilities there are thereby there are, we present you in the following.

Icon position and size

By default, Eye-Able is located at the top right of the website. Our user tests have shown that this is where it is seen best. Eye-Able can also be placed at different heights or on the left side of the website.

Also, the size of the icon can be varied, and we recommend a size between 50 and 70 pixels. In the mobile application, sizes between 40 and 50 pixels have proven themselves.

The image shows the website On the left and on the right a bar is displayed, which go over the entire height of the page. Within this area, the position of the icon can be adjusted.
Along the gray rectangles can be placed Eye-Able .

If you want to place Eye-Able in another place, this is also possible. Then the software must be embedded locally on the website. This is described in our article "Embedding Eye-Able directly into the page". It is also possible to provide your own icons or elements with the Eye-Able function.

The image shows the embedding of Eye-Able in the navigation bar of the website of the district of Lower Franconia.
The district of Lower Franconia has also embedded Eye-Able in the navigation bar.
The image shows the integration of Eye-Able at the Diocese of Würzburg. Here Eye-Able was embedded in the navigation bar.
At the Diocese of Würzburg, Eye-Able is embedded in the navigation bar.

Color adjustments

In addition to the position, the colorn can be adjusted. Thus the colors of the own CI can be used and Eye-Able be nicely integrated into the page. For example, the color of the icon and the toolbar can be customized

The figure shows the Eye-Able toolbar in red.
Customization of the icon and toolbar on
The image shows the Eye-Able toolbar in black and yellow.
Color customization of icon and toolbar at

In addition to the colors of the icon and the toolbar, the hover and focus colors can also be customized. An example of this can be found at the website

The image shows the Eye-Able toolbar, where the mouse is used to hover over the "Font Size" function.
Here the hover color was changed from black to yellow.
This image shows the Eye-Able toolbar with keyboard navigation enabled. This is highlighted by the color blue.
When this function is activated, it appears in blue.

Various icons

You can see the icons of Eye-Able . One of them is an eye, the second and third icons represent the male for accessibility that stretches his 4 limbs from the body
Three icons we offer.

We offer three different icons to choose from by default. Of these, we like to recommend the third version, as this is a common accessibility icon and therefore easily recognizable. However, you can also choose any of the other icons or use your own . By embedding it in the website ,every element of the websitecan be provided with the functionality of Eye-Able .

Customization of the scope of functions

We offer a wide range of functions, however not every function is used equally. For this reason, some functions are located in the "More functions" submenu.. Except for the instant view, the font magnification, the contrast mode and the read aloud function, the other functions can also be moved to the submenu.

The figure shows the menu of Eye-Able with reduced functionality.
Here the functions "Night Mode" and "Blue Filter" have been moved to the second level.

Changes to the labels

In addition to the visual look, we also like to customize the labels, from the tooltip to the labels of the individual functions.

The image shows the Eye-Able tooltip in red with customized content. The content reads: Accessible View - Customize this website. Click to open or hold to move.
The tooltip with individual labeling.

Own icons in the toolbar

We use different icons for the functions, which should visually represent the function. However, we are also happy to use individual icons that correspond to the visual appearance of the respective page.

Here a custom icon set was used for the functions.

You can make these settings yourself

In our customer area we offer the possibility to make some adjustments by yourself. Here you can modify the size and position of the icon as well as set the color of the icon and the toolbar. It is also possible to customize some functions for individual elements. To do this, go to the "Assistance software" tab and click on the "Customize appearance" button for the desired domain. A pop-up window will open where the adjustments can be made.

The image shows the customization menu in the dashboard of Eye-Able. Here the size and color of Eye-Able can be adjusted.
In the dashboard, the position, size and color of the icon itself can be changed.

Eye-Able offers many possibilities for customization. Feel free to contact us if you want Eye-Able customized for your site. We will be happy to advise you!

Simple for all

Interest aroused? We will be happy to help you.

With over 25 functions for digital accessibility, Eye-Able also helps you to reduce your barriers in the long term. In this way, you make your information accessible to all and do not exclude any visitors - in short: you tap into a new target group without high marketing volumes.

Icon shows accessibility figure


Non-binding consultation on digital accessibility in general

Icon shows accessibility figure


Discussion of possible optimization potential on your website

Icon shows accessibility figure

Live Demo

Presentation of the assistance software directly on your website

More contributions

If it may be a little more:

more than an overlay tool

More than just an overlay tool

We believe that digital accessibility cannot be installed. Accessibility is a process and there are tools that can greatly simplify this process and make it easier.