Accessibility | Principles

Sometimes a problem with accessibility is visible to the naked eye. For example, when the text's color is gray or yellow, it becomes illegible even with perfect eyesight.

The gray and yellow text is obviously unreadable.

You don't need special tools to understand the problem when a thin or light font is used, especially on dark backgrounds. Sometimes it can be a regular typeface, but the font letters are too thin by design. Choosing a more readable typeface is better, and you should never use thin and light in your interfaces.

Do not use thin or light fonts in interfaces. They are almost always unreadable.

But often, you can't do without special tools, and you can't judge accessibility by relying only on common sense and good eyesight. In this case, it is better to test the contrast between the text and the background with accessibility checkers.

To the naked eye, it appears that the white text on the orange background is contrasting. It really isn't.

So it is always better to check the choice of colors for text and backgrounds according to the WCAG recommendations and standards, especially on dark backgrounds. And test your decisions in color blind vision simulators.

Even with exceptional vision, the too contrasty text is difficult to read. It is almost always a good idea to reduce the contrast of white text on a black background. With black text on a white background, you can make the background slightly gray or black text less black.

Pure white text on a black background is too contrasting. Light gray is better.

The best strategy is to think about accessibility before you start work. Then you can initially build your design and typography according to guidelines. You will always check your color and text size choices first. As a bonus, this will make your design more robust, cohesive, and balanced.

So it's worth paying special attention to the accessibility and adaptability of typography. Yes, it costs a little more of your time, and you may be unable to use a super bright text color on a too-light background because it's so beautiful. But you will make a design that will be most comfortable for most people and pay off.

The accessible design consists of many recommendations, such as alternative text for images, content readability for screen readers, special markup tags, animation rules, contrast and so on.

When doing typography design, it seems more concerned for those implementing a website or an application in code. Like the designer should think only about contrasting colors, and that's enough. That's not true because accessible design shows up in everything and makes the whole interface more usable regardless of people's differences.

The hint is hidden behind the icon it does not work well for screen readers and for users with any vision.

The hint is immediately visible and it is well read by any user and screen readers.

By keeping accessibility in mind, you are aiming for an exceptional design that is truly great to read and use for everyone without exception.