5 Tools zum Erstellen einer Web-Farbpalette, die jeder sehen kann

Ihre Markenfarben haben eine starke emotionale Wirkung, aber wie wirken sie auf Website-Besucher, die sehbehindert oder farbenblind sind oder denen Umwelteinflüsse die Sichtbarkeit erschweren?

Farb- und Kontrastniveaus sind für die Kommunikation von entscheidender Bedeutung, und die genau richtigen Details sind für den auf Barrierefreiheit bedachten Designer von entscheidender Bedeutung.“

Störungen der Farbwahrnehmung kommen häufiger vor, als Sie vielleicht denken. In diesem Beitrag sprechen wir darüber, wie Menschen mit Behinderungen wie Sehbehinderung, Legasthenie und Farbenblindheit mit dem Internet interagieren.

Wie verwende ich einen Farbprüfer, um die Barrierefreiheit meiner Website zu verbessern?

Dieser Abschnitt ist eigentlich recht einfach, erfordert jedoch einige Mühe. Sie müssen das Online-Kontrastprüftool von WebAIM verwenden. WebAIM ist eine gemeinnützige Organisation mit Sitz an der Utah State University mit dem Ziel, die Barrierefreiheit im Internet weltweit zu verbessern.

Geben Sie einfach Ihre Vordergrundfarbe (z. B. die Farbe Ihres Textes oder Ihrer Symbole) und Hintergrundfarbe als Hexadezimalwerte (auch als Hex-Werte bezeichnet) ein, wie in angegeben HTML oder CSS, und der Kontrastverhältnisprüfer informiert Sie darüber, ob das Verhältnis ausreichend ist. Denken Sie daran, dass das minimale Kontrastverhältnis, das Sie anstreben sollten, 4.5 zu 1 beträgt. Schwarzer Text auf weißem Hintergrund hat ein Kontrastverhältnis von 21 zu 1, Sie haben also einen großen Spielraum.

5 Tools zum Erstellen einer Web-Farbpalette, die jeder sehen kann

1. WebAIM Farbkontrastprüfer

Geben Sie die Hex-Farben für Vorder- und Hintergrund ein. Die Ausgabe zeigt die AA- und AAA-Konformität für normalen und großen Text sowie einen Beispielsatz. Mithilfe von Schiebereglern können Sie Dinge ändern, bis Sie eine gute Kombination gefunden haben.

Stärken

• Einfaches Tool mit einer augenschonenden Benutzeroberfläche.
• Dies ist ein schönes, einfaches Tool für Anfänger und nicht nur für Designer.

Schwächen

• Mehr als zwei Farben kann man nicht vergleichen, nur zwei.
• Der Helligkeitsregler ist keine sehr gute Möglichkeit, Farben auszuwählen. Es ist schwer zu sagen, wie attraktiv die Farben in diesem einfachen Display sind.

2. Kontrastprüfer für WCAG

Geben Sie die Hex-Farben für Vorder- und Hintergrund ein. Zeigt die AA- und AAA-Konformität für normalen und großen Text neben einer Textprobe von Lorem Ipsum. Sie können auch ein Bild hochladen. Es wird automatisch eine 9-Farben-Palette für Sie ausgewählt. Anschließend können Sie jede Farbe entweder als Vordergrund- oder Hintergrundfarbe vergleichen.

Stärken

• Einfaches Tool mit benutzerfreundlicher Oberfläche.
• Die Möglichkeit haben, Paletten aus Bildern zu erstellen.

Schwächen

• Die Palette wird automatisch ausgewählt und Sie können sie mit der Farbauswahl weiter ändern, diese Änderungen werden jedoch nicht wieder in der Palette gespeichert. Man muss die Informationen kopieren und in ein neues Dokument einfügen.

3. Farbwürfel

Geben Sie die Farben für die Palette jeweils in einer eigenen Zeile ein. Die Ausgabe zeigt Beispielbuchstaben mit Kontrastverhältnissen im Vergleich zu AA-Standards für kleine und große Schriftarten. Drei Spalten zeigen den Kontrast zu einem weißen Hintergrund, einem schwarzen Hintergrund und einer Reihe von Markenfarben, die „am besten lesbar von den verfügbaren“ sind.

Stärken

• Angenehm für das Auge Die Benutzeroberfläche (UI) ist gut organisiert und der Status „Bestanden/Nicht bestanden/Edge“ ist leicht zu erkennen.

Schwächen

• Entspricht nicht den von AAA festgelegten Standards.
• Es werden nicht alle möglichen Farbkombinationen unterstützt, und es ist zunächst nicht klar, ob dies der Fall ist.

4.) Kontrastraster mit acht Formen 

Geben Sie Palettenfarben ein. Außerdem können Sie jeder Farbe einen Namen geben. Die App erstellt eine Tabelle mit allen möglichen Farbkombinationen. Es gibt drei Fliesengrößen. Es gibt visuelle Hinweise für AA und AAA „Bestanden/Nicht bestanden/Kante“ und ein effektives Kontrastverhältnis. Spalten und Zeilen können per Drag & Drop in der App verschoben werden. Tabellendaten können gespeichert, exportiert und geteilt werden.

Stärken

• Es gibt viele hilfreiche Funktionen, die bei der Analyse ganzer Paletten helfen.

Schwächen

• Es ist schwieriger zu erlernen als andere Tools, die einfacher zu verwenden sind.
• Nicht die richtige Art, nur zwei Farben zu vergleichen.
• Nicht gut, um herauszufinden, wie Farben zusammenpassen.
• Der Anblick ist etwas überwältigend, aber es werden viele Informationen angezeigt.

5. Farbsicher 

Geben Sie die Hintergrundfarbe ein. Wählen Sie Familie, Größe und Stärke der Schriftart. Wählen Sie AA oder AAA als Standard. Zeigt die ausgewählte Farbe und ihren Hex-Code sowie ein Beispiel und das effektive Kontrastverhältnis an. Das Beste daran sind die großen Miniaturansichten möglicher Vordergrundfarben mit genügend Kontrast. Sie können wählen, ob Sie alle oder nur bestimmte Farbgruppen (Grün, Blau, Lila usw.) betrachten möchten.

Stärken

• Mit einer augenschonenden Benutzeroberfläche ist es einfach, eine Farbkombination zu finden, die gut aussieht und gut funktioniert.
• Dies ist ein nützliches Tool, wenn Sie noch nicht über eine Markenfarbpalette verfügen oder diese zu einer hinzufügen möchten, die Sie bereits für das Web haben.

Schwächen

• Sie können jeweils nur Vordergrund- und Hintergrundfarben vergleichen.
• Sie müssen Farben kopieren und in ein separates Dokument einfügen, wenn Sie sie speichern möchten.
• Gehen Sie raus und machen Sie etwas für alle!

Sobald Sie wissen, wie man diese Tools verwendet, stellen Sie möglicherweise fest, dass Sie für ein Projekt mehr als eines benötigen. Vielleicht ist Color Cube die beste Möglichkeit, einem Kunden zu zeigen, was Sie über Barrierefreiheit gelernt haben. Vielleicht nutzen Sie das WebAIM-Tool ständig, um schnelle Stichproben durchzuführen.

Zusammenfassung 

Mit den Tipps, Richtlinien und Tools, über die wir gerade gesprochen haben, können Sie Ihrer Website kontrastreiche Farben und Beschriftungen verleihen. Dies erleichtert Menschen mit Sehbehinderung, Legasthenie und Farbenblindheit das Lesen Ihrer Website und Ihrer Inhalte. Seien Sie nicht überrascht, wenn auch Ihr allgemeines Publikum die Nutzung Ihrer Website einfacher findet.