Articles

Our services

About Useit

This article is based on a lightning talk I held at a 

If you prefer to watch, you can find it on Youtube with English subtitles:

Personalization means that the users themselves can change the look and behavior of the interface according to their own preferences and needs. 

For many users, a personalized website will be much more pleasant and enjoyable. But for some users with disabilities, personalization can be vital for them to be able to use the website!

In this article, we will take a look at a couple of different ways that a user can personalize a website – such as changing the font size or turning on dark mode – and why it is so important for accesibility!

In dark mode, the interface is displayed with muted colors and a dark background, instead of the usual bright background. Many users feel that a dark palette is more pleasant for the eyes, especially during the night. But dark mode also has an important accessibility function. Many visually impaired users are sensitive to light and can experience discomfort reading text against a bright white background. For them, dark mode can be very helpful!

Dark mode has existed in mobile apps for quite some time, but it is also becoming more and more common on the Web. In the picture below, you can see how this website (Useit.se) looks in dark and light mode:

For it to work, designers and developers need to create a separate design for dark mode. This can be done with the CSS media query 

It is also a good idea to offer a manual toggle somewhere on the site, as Facebook does in the image below. A user's preference might vary. For instance, they might want Youtube in dark mode, but still prefer Facebook to be light.

Excessive animations in the interface can cause serious problems for users with disabilities.

"Accessibility according to actual people with disabilities"

 , unwanted animations are ranked as one of the top accessibility problems by several of the responding users.

Because of this, all designers and developers really should be listening for the system preference to reduce motion, and adapt their animations accordingly.

This can be done quite easily for CSS animations with the CSS media query 

You can also use it for JavaScript-based animations like this:

There is however som room for nuance. Well-executed and non-interfering animations 

 since they help the user understand what is happening and decrease the cognitive load.

Because of this, I recommend that you go through all your animations and identify the ones that might be problematic. And that you remove the worst ones altogether - regardless if the user has enabled the reduced motion setting or not!

is an accessibility setting in Windows that lets the user change the color theme for the entire operating system, including all apps, programs and websites.

For websites, the high contrast mode makes it possible for (primarily) low-vision users to adapt the display and overwrite the original website design.

Apart from changing colors, the high contrast mode also removes background images, shadows, effects and other potentially distracting design elements. In the image below, you can see how this website (Useit.se) looks with two of the default high contrast themes selected: "Night sky" and "Desert":

The user can also create their own theme and choose their own colors for common interface elements, such as background, body text, link text, buttons, focus styles and disabled elements.

The nice thing about high contrast mode is that you often do not have to 

 anything for it to work – you just have to build your website with semantic HTML.

However, you sometimes might want to fine-tune a few details. For instance, if an icon has the wrong color, if you want a better focus outline, or if you want to keep some of the original colors. For this, you can use the CSS media query  

Activate one of the default themes or create your own

This type of high contrast mode is currently a Windows-only feature. However, there is a way to emulate it in the Chrome browser on MacOS:

Open the "More tools" menu (three dots in the top-right)

Enable "Emulate CSS media query forced-colors"

(Optional) Combine with "Emulate CSS media query prefers-color-scheme" to toggle between light and dark contrast themes.

Text size is very important for good accessibility and usability.  Many users with and without disabilities will have difficulties reading and understanding the content if the text is too small.

Because of this, it is important that users can adapt and scale the text according to their own needs, for instance by setting a preference in their browser settings:

The best way for you as developers and designers to support this is to make sure that you always define your font sizes with relative values (

Relative font sizes use the page base size as a reference point. When the user changes their base size preference, all other texts will scale accordingly. 

A good example of scaling text can be found at 

. This departure card component from the time table works very well both at 100% and 200% text scale:

The biggest challenge with scalable text is to accept that you as designer or developer actually 

You can no longer count on a certain text to occupy a certain width in pixels, since some users' text will be bigger. And you also cannot set fixed pixel heights and widths on containers without risking cutting off overflowing text.

But there are many good techniques you can use to overcome these challenges! You might, for instance:

Reflow the content onto another row when you run out of space, using 

 to allow your containers to grow with the text

or simply pick a better and less restricted layout.

This will of course require a change of mindset if you have not worked this way before. But once you stop thinking in pixels, your designs will improve and you will never want to go back!

Personalization is a fantastic tool for creating websites that are usable, accessible and flexible.

However, there are still some caveats. This particular type of personalization will only reach the minority of users who are aware that the settings exist, and have chosen to enable them. And personalization also does not exempt you from living up to any legal accessibility requirements that apply to you, such as EN 301 549, Section 508 or WCAG.

In other words, personalization does not replace traditional accessibility efforts and "design for all" – but it can be a great complement and an important part of this work!

In this article, our accessibility expert Tommy Feldt will take a look at a couple of different ways that a user can personalize a website – such as changing the font size, turning off animations, turning on dark mode or a high contrast theme– and why it is so important for accesibility!

In this article, our accessibility expert Tommy Feldt will take a look at a couple of different ways that a user can personalize a website – such as changing the font size or turning on dark mode – and why it is so important for accesibility!

Make your website more accessible with personalization

We are now launching the new and improved Useit website! Here you can read more about Useit, our accessibility services and our amazing team of experts in Sweden and Norway.

We will also post our upcoming events and blog about interesting subjects within accessibility, inclusive design and UX.

Here you can read about Useit, our services and our amazing accessibility team.

Our new website is launched!

Are you interested in our services or do you have any questions? Contact Marcos and he will tell you more!

Marcos Flores

Are you interested in our digital accessibility services or do you have any questions? Contact Marcos and he will tell you more!

Contact us

Articles and news about digital accessibility.

Articles and news from Useit

Make your website more accessible with personalization

Our new website is launched!

Contact us

Marcos Flores