Geschreven door Sebastian Fjeld op 15 december 2023

Open your eyes in web design! - Color blindness on the Internet

Accessibility

Laptopbildschirm zeigt ein Regenbogenherz in Farbe und eins ohne Farbe.As far as accessible web design is concerned, a lot still needs to be done: 70% of all websites on the Internet are not accessible accessible and thus exclude many people excluded. There can be various reasons for this. One of them may be that the respective contents of a page is visually are not visually inclusive. However, it is crucial to bear in mind that not all users colors and contrasts can perceive colors and contrasts in the same way. One must look at your own website through different eyes. What advantages accessible web design can have for you in terms of colorblindness and what you need to look out for.must be taken into accountin this article.

Color blindness encompasses several conditions, including monochromasia (inability to see colors), tritanopia (inability to distinguish blue and yellow), deuteranopia (inability to see green) and protanopia (inability to distinguish red).

What does web accessibility mean for color blindness?

Web accessibility for Color blindness means designing your website so that it can be understood and used by people who cannot fully distinguish colors. Dt includes factors such as e.g. contrast uand text size. In order to meet accessibility standards, websites are designed using the web content Accessibility Guidelines (WCAG) measured, which minimum contrast ratios, color definitions and more.

Color accessibility on websites offers several advantages

  • Ethical responsibility: It is a commitment to creating a digital world in which everyone has equal access to information and services, regardless of ability.

  • Legal compliance: Non-compliance with accessibility standards can lead to legal issues, such as lawsuits and financial penalties. Ensuring that your website accommodates colorblindness and other disabilities is a proactive approach.

  • Improved user experience: Accessibility standards benefit all users. Complex and unclear color usage can be frustrating for everyone and lead to higher bounce rates.

Fact: In a study on accessibility in 2021, 86% of the top 1 million websites did not meet the minimum websites did not meet the minimum color contrast ratio requirements.

Elements that may not be accessible to colorblind users:

  • Elements with low contrast: Poor contrast can make images, videos and other visual elements difficult to distinguish for people with limited color perception.

  • Readability of texts: The choice of font, font style, font size and spacing can affect the legibility of text.

  • Text overlays on images: Superimposed text on images can compete with the image content and make reading more difficult.

  • In-text hyperlinks: Links must be clearly visible beyond the color, as some users may not notice color changes when hovering over links.

  • Placeholder texts in forms: Text in form fields should have sufficient contrast to make it clear that it is input text.

The high number of non-accessible websites highlights the urgency of making accessible web content accessible for people with color blindness. The need goes beyond an ethical obligation and includes legal compliance and the fundamental improvement of the user experience for all. So: keep your eyes open in web design!

Sebastian Fjeld

Sebastian Fjeld has been part of the team as a professional voiceover artist and copywriter at Eye-Able® since the beginning. He studied voice acting at a university and was trained by actors. Currently he is completing his education as an interpreter for various languages.

More contributions

If it may be a little more

Filter

Filter op categorie

Bevestig je selectie met de knop aan het einde van de lijst na het kiezen van de categorieën.

Filters resetten
Bovenaanzicht van een laptop waarop een website wordt getoond, met twee handen die op het toetsenbord typen. Links naast de laptop staat een blauw toegankelijkheidspictogram met een persoon-icoon.

"Digitale toegankelijkheid is nu geen prioriteit" - en dat kost je elke dag omzet

Lees verhaal
iPhone en Apple Watch met toegankelijkheidsfuncties in beeld. Op het iPhone-scherm zijn opties zoals Live luisteren, geluidsniveau van koptelefoons en ondertiteling zichtbaar. Op de Apple Watch wordt live transcriptie getoond. Het toegankelijkheidssymbool en het Apple iPhone-logo benadrukken inclusieve functies voor gehoorondersteuning.

Toegankelijkheid iPhone: zo haal je alles uit de toegankelijkheidsinstellingen

Lees verhaal
Drie smartphoneschermen met een e-commerce-app. In het midden staat een productpagina voor de Sony WH-1000XM5 koptelefoon, links een overzicht met aanbiedingen en rechts het checkout-scherm met betaalopties. Het universele toegankelijkheidssymbool linksboven benadrukt toegankelijke online winkelervaringen.

Mobiele toegankelijkheid: ben jij er klaar voor?

Lees verhaal
Illustratie van een webpagina waarop tekst automatisch wordt omgezet naar eenvoudigere, beter leesbare content. Een pijl verbindt originele tekst met een vereenvoudigde versie, naast pictogrammen voor AI en een open boek, wat het herschrijven naar begrijpelijke en toegankelijke taal visualiseert.

AI accessibility: Hoe organisaties inclusieve digitale ervaringen maken

Lees verhaal

You need more informations?

Write to us and we will be happy to help you.

A man and a woman look at a monitor and laugh