Fünf einfach zu bedienende "Kontrast-Checker" für die Verantwortlichen.

2024/07/29

Kontrast-Prüferberechnet das Kontrastverhältnis, d. h. den Unterschied zwischen der Vordergrundfarbe (Text und grafische Elemente) und der Hintergrundfarbe einer Website oder eines Bildes,ob das Verhältnis den Zugänglichkeitsrichtlinien für Webseiten wie WCAG und JIS entspricht.Instrumente zur Bewertung derAuch bekannt als Kontrastverhältnisprüfer oder Farbkontrastprüfer.

In diesem Artikel werden die folgenden fünf Werkzeuge als typische Kontrastprüfgeräte vorgestellt.

Im Folgenden finden Sie eine Einführung in diese Werkzeuge sowie eine ausführliche Erläuterung, worauf Sie bei der Überprüfung des Kontrastverhältnisses achten sollten,Personen, die für die Zugänglichkeit des Internets zuständig sind, sollten sich diesen Artikel zu Gemüte führen.

Fünf einfach zu bedienende Kontrastprüfgeräte für Fachleute im Bereich der Barrierefreiheit.

Es gibt verschiedene Arten von Kontrastprüfgeräten, die für Designer und Fachleute für Barrierefreiheit unerlässlich sind, um den Kontrast ihrer Websites und Webinhalte zu überprüfen.

Hier ist sie also,Typische und einfach zu bedienende KontrastkontrollenFünf dieser Tools werden in diesem Abschnitt vorgestellt. Einige Tools sind auf Websites (Browsern) verfügbar, während andere installiert und verwendet werden können,Beide Tools sind kostenlos erhältlich.um das System einzuführen. Sie können also gerne zuerst die Verwendung des Systems überprüfen.

Name des Werkzeugs	Eigenschaften	Nutzung der Umwelt
① WebAIM	Ein Tool, das sofort nach dem Zugriff auf die Website verwendet werden kann; obwohl die Website in englischer Sprache ist, ist die Benutzeroberfläche einfach, übersichtlich und leicht zu bedienen.	(Web-)Browser
② ColorTester	Da es sich um ein installiertes System handelt, kann seine Verwendung am Arbeitsplatz eingeschränkt sein.	installieren (Windows/Mac)
③ AdobeColor	Verfügt über eine Kontrastprüfungsfunktion sowie eine Vielzahl von Farbschema-bezogenen Funktionen und kann mit Adobe-Produkten wie Photoshop, Illustrator und inDesign verknüpft werden.	(Web-)Browser
④ WCAG Farbkontrast-Prüfung	Dieses Tool wird in Google Chrome installiert und als Erweiterung verwendet. Es ist besonders nützlich, um den Kontrast einer Website zu überprüfen.	(Web-)Browser (Chrome-Erweiterung)
⑤ ContrastGrid	Ein Werkzeug, mit dem die Benutzer den Kontrast der eingestellten Farben auf einen Blick überprüfen können; es können mehrere Farbcodes eingestellt werden, so dass auch Personen, die sich mit Farbschemata nicht auskennen, leicht verstehen und entscheiden können, welche Farben sie verwenden wollen.	(Web-)Browser

 

① WebAIM

Legen Sie die Textfarbe (Foreground) und die Hintergrundfarbe (Background) fest und berechnen Sie das Kontrastverhältnis,Sicherstellen, dass die WCAG-Kriterien erfüllt werdenDie Farben können über einen Farbcode oder einen Farbwähler festgelegt und die Helligkeit eingestellt werden. Sobald eine Farbe festgelegt ist, wird das Kontrastverhältnis in Echtzeit berechnet, und die Vorschau kann in normalem Text, fettgedrucktem Text und grafischen Objekten wie Häkchen angezeigt werden.

Ob das jeweilige Ergebnis der Konformitätsstufe entspricht, ist auf einen Blick unter "Bestanden" oder "Nicht bestanden" zu erkennen.Die Navigation ist auf Englisch, aber einfach und übersichtlich.Sie müssen sich also keine Gedanken über die allgemeine Verwendung machen.

Offizielle Seite:WebAIM

② ColorTester

Das Kontrastverhältnis der beiden Farben wird nach den Kriterien von JIS X 8341-3:2010 (WCAG 2.0) berechnet und bewertet.Ziehen Sie Bilddateien in das Fenster, um die Vorder- und Hintergrundfarben des Bildes automatisch zu ermitteln und zu bewerten.Ist.

Das Tool wird in Japan hergestellt und ist sowohl mit Windows- als auch mit Mac-Betriebssystemen kompatibel,Das Tool muss installiert werdenDie unterstützten Versionen für die einzelnen Betriebssysteme sind Windows 8.1 oder höher und Mac OS X 10.10 oder höher; eine englische Version ist ebenfalls verfügbar.

Offizielle Seite:ColorTester

③ Adobe Farbe

Dieses Tool wird von Adobe, einem Entwickler und Vertreiber von Tools für Kreative, zur Verfügung gestellt und verfügt über verschiedene nützliche Funktionen für kreative Tätigkeiten, einschließlich eines Kontrastprüfers zur Überprüfung der Barrierefreiheit.

Es ist jedoch ähnlich wie bei anderen Kontrastprüfgeräten,Sie schlägt auch die beste Kontrastfarbe für die eingestellte Farbe vor.Obwohl das Tool von Adobe stammt, kann es ohne Installation oder Anmeldung verwendet werden, aber wenn Sie sich anmeldenEinfach zu bedienendes Werkzeug für Designer, die regelmäßig Anwendungen von Adobe verwenden, da es mit anderen Adobe-Produkten integriert werden kann.So sollte es sein.

Offizielle Seite:Adobe Farbe

④ WCAG Farbkontrast-Prüfung

Add-ons (Erweiterungen) für Google ChromeMit diesem Tool können die auf den Seiten einer Website verwendeten Farben sofort extrahiert und der Kontrast der einzelnen Farben bewertet werden; es kann Seite für Seite überprüft werden, so dass es leicht für die Überprüfung von Websites in der Testphase oder für die Wartung von bereits in Betrieb befindlichen Websites verwendet werden kann.

Klicken Sie auf eine der im seitlichen Bedienfeld angezeigten Farben, um eine Nahaufnahme des Teils der Seite zu erhalten, in dem sie verwendet wird,Es ist auch einfach, informationsreiche Websites wie Portale zu überprüfen.。

Offizielle Seite:WCAG Farbkontrast-Prüfgerät

⑤ Kontrast-Raster

Viele Kontrastprüfgeräte basieren auf der Methode, eine Farbe anzugeben und den Kontrast jedes Mal zu überprüfen, aber dieses ToolEs wird eine Farbpalette (Liste) angezeigt, und Sie können die gewünschte Kombination von Kontrasten auswählen.Diese Methode empfiehlt sich also für Design-Anfänger und diejenigen, die sich nicht gut mit Farbschemata auskennen.

Wenn Sie die offizielle Website besuchen, sehen Sie bereits die oben abgebildeten Standard-Farbkombinationen. Wenn Sie einen Farbcode in das Feld links eingeben, werden die Kombinationen mit den anderen Farben der Palette aufgelistet. für jede FarbkombinationDie Konformitätsstufe ist gekennzeichnet, z. B. "AA" oder "AAA", und die verschiedenen Farben der Etiketten zeigen an, ob sie konform sind oder nicht.Daher sind die verfügbaren Kombinationen auch auf einen Blick ersichtlich.

Offizielle Seite:Kontrast Raster

Wir haben schnell fünf nützliche Kontrastprüfgeräte vorgestellt, aber warum wir den Kontrast überhaupt überprüfen müssen, werden wir im Folgenden erklären.

Warum ist eine Kontrastmittelkontrolle notwendig?

Über die Verpflichtung zu angemessenen Vorkehrungen im Rahmen des überarbeiteten Gesetzes zur Diskriminierung von Behinderten, das im April 2024 in Kraft tritt,Auch die Unterstützung der Barrierefreiheit im Internet ist eine wichtige Maßnahme.Um darauf zu reagieren, ist es zunächst notwendig, die Website aus verschiedenen Blickwinkeln zu betrachten, um zu prüfen, ob die Zugänglichkeit der Unternehmensseite erreicht wurde.

Da Websites viele Informationen enthalten, die visuell gewonnen werden, sollten sie nicht nur von Menschen mit klarem Sehvermögen (seigansha: Menschen, die nicht sehbehindert sind), sondern auch von Menschen mit Sehbehinderungen genutzt werden.Ist die Website so gestaltet, dass Texte und Bilder für sehbehinderte und ältere Nutzer oder für Nutzer mit Farbsehschwächen erkennbar sind?Die Zugänglichkeit der Website muss überprüft und bei Bedarf verbessert werden.

Und einer der Indikatoren, die zur Überprüfung dieser Tatsache erforderlich sind, istFarbkontrastverhältnis".Das Kontrastverhältnis ist ein Maß für den Helligkeits- oder Dunkelheitsunterschied zwischen zwei Farben auf dem Bildschirm (in der Regel Vorder- und Hintergrundfarbe). Dieses Verhältnis ist eine numerische Darstellung der relativen Helligkeit der beiden Farben; je höher das Kontrastverhältnis ist, desto leichter lassen sich die Farben im Allgemeinen unterscheiden,Das Kontrastverhältnis wird im Bereich von 1:1 bis 21:1 angegeben, wobei höhere Werte einen höheren Kontrast = eine bessere Erkennbarkeit bedeuten.。

Schauen wir uns nun an, inwieweit unterschiedliche Kontrastverhältnisse tatsächlich die Art und Weise verändern, wie wir Dinge sehen, siehe unten.

◆Sichtbarkeitsunterschiede aufgrund des Kontrastverhältnisses

Außerdem wurde das obige Bild unscharf gemacht, um eine Vorstellung davon zu vermitteln, was passiert, wenn Buchstaben verschwommen erscheinen, wie es bei Menschen mit Sehschwäche der Fall ist.

◆ Unterschiede in der Darstellung, wenn das Bild unscharf ist.

So,Bei einem hohen Kontrastverhältnis sind die Farbgrenzen leichter zu erkennen, d. h. besser lesbar, da ein größerer Unterschied zwischen der Hintergrundfarbe und der Gesamtfarbe der Landschaft besteht.So ist es beispielsweise leicht zu verstehen, dass Text und Hintergrund im Verhältnis 1:1 dieselbe Farbe haben und nicht zu erkennen sind, während sie im Verhältnis 21:1 in Schwarz-Weiß dargestellt werden und deutlich zu erkennen sind.Um die Barrierefreiheit von Websites mit einer Mischung aus verschiedenen Elementen wie Text und Bildern zu gewährleisten, muss das Kontrastverhältnis mit viel Liebe zum Detail gestaltet werden.。

Daher ist der Kontrast zwischen dem Design ihrer eigenen WebsitesErfüllt sie die Anforderungen für die Gewährleistung der Barrierefreiheit im Internet?Die Prüfung des Kontrasts ist eine wesentliche Aufgabe zur Bestimmung derDer "Contrast Checker" ist ein wichtiges Instrument für quantitative Entscheidungen.Die Anforderungen an die Barrierefreiheit im Internet werden im nächsten Abschnitt erläutert.

Drei Punkte der Kontrastprüfung.

Wenn Sie ein Kontrastprüfprogramm verwenden, um das Kontrastverhältnis einer Website oder eines Inhalts zu überprüfen, sollten Sie nicht nach Ihrem eigenen Empfinden entscheiden, ob es akzeptabel ist oder nicht.Die Überprüfung muss in Übereinstimmung mit den etablierten Standards für die Barrierefreiheit im Internet durchgeführt werden.In diesem Abschnitt werden drei wichtige Punkte beschrieben, die bei Kontrastkontrollen beachtet werden sollten.

Punkt 1: Verstehen von Kontrastverhältnissen, die den JIS-Normen entsprechen.

Wie bereits erwähnt, hat das überarbeitete Behindertendiskriminierungsgesetz die Bereitstellung angemessener Vorkehrungen für alle Unternehmen verbindlich vorgeschrieben, so dass die Barrierefreiheit im Internet für alle Unternehmen ein Muss ist.

Es gibt verschiedene Elemente, aus denen eine Website besteht, für die jeweils eigene Zugänglichkeitsstandards gelten, die alle durch einen internationalen Standard namens WCAG 2.0 (Web Content Accessibility Guidelines 2.0) definiert sind.JIS-Norm (JIS X 8341-3:2016)ist das, worum es geht.

Darüber hinaus sind die Leistungsniveaus in dieser Norm nach Angaben des Ministeriums für innere Angelegenheiten und Kommunikation als Konformitätsstufen A bis AAA definiert,Die Zugänglichkeit des Internets erfordert die Einhaltung von AA oder AAA (empfohlen)Sie gilt als eine

Referenz:Unterstützung der Zugänglichkeit von Websites usw., die von öffentlichen Behörden (Ministerium für innere Angelegenheiten und Kommunikation) verlangt wird.

Und auch für das Kontrastverhältnis werden Normen festgelegt.

◆Kontrastverhältnis zur Einhaltung der Konformitätsstufen AA und AAA

Konformitätsstufe	Erforderliches Kontrastverhältnis
AA	4,5:1 oder höher
AAA	7:1 oder mehr

Mit anderen Worten: eine Website für die Barrierefreiheit im Internet,Es ist ein Kontrastverhältnis von mindestens 4,5:1 erforderlich.Viele Kontrastprüfprogramme berechnen automatisch das Kontrastverhältnis, achten Sie also auf dieses Verhältnis und überprüfen Sie es.

Beachten Sie, dass das AAA-Kontrastverhältnis von 7:1 auf Nutzern basiert, deren Sehvermögen auf etwa 20/80 reduziert ist, und dass das W3C davon ausgeht, dass Nutzer, deren Sehvermögen über 20/80 hinaus reduziert ist, in der Regel unterstützende Technologien für den Zugriff auf Inhalte verwenden.

AAA ist nicht zwingend erforderlich, sondern wird nur empfohlen,Wenn die Website für Nutzer mit Sehschwäche oder Farbsehschwäche bestimmt ist, die nicht über Hilfsmittel verfügen, sollte sie mit einem Kontrastverhältnis von 7:1 gestaltet werden.So sollte es sein.

Referenz:Verstehen Sie den Leistungsstandard 1.4.6 | WCAG 2.0 Kommentar (W3C)

Punkt 2: Achten Sie auf die Schriftgröße.

Obwohl unter Punkt (i) angegeben wurde, dass das Kontrastverhältnis mindestens 4,5:1 betragen muss, gibt es tatsächlich Ausnahmen davon.In den folgenden Fällen ist es nicht erforderlich, 4,5:1 zu erfüllen

◆Ausnahmen von der Einhaltung der Normen für das Kontrastverhältnis

Ausnahme 1) Großer und fetter Text.
Für großen oder fetten Text (normaler Text über 18 Punkt oder 14 Punkt fett),Kontrastverhältnis von 3:1würde das Kriterium erfüllen, da großer Text gut sichtbar ist und daher ein etwas geringerer Kontrast als weniger problematisch angesehen wird.

Ausnahme (ii) Text und Logos zu dekorativen Zwecken.
Beiläufiger Text zu dekorativen Zwecken und Firmenlogos sind von dieser Anforderung an das Kontrastverhältnis ausgenommen, da sie der Gestaltung und dem Wiedererkennungswert der Marke dienen und nicht als Mittel zur Übermittlung von Informationen angesehen werden.

Ausnahme (iii) Text in Bildern.
Zu den Ausnahmen gehören jedoch Text in Fotos und Bildern,Ein angemessenes Kontrastverhältnis, auch innerhalb des Bildes, in Bezug auf Text, der für die Vermittlung von Informationen wichtig ist.wird empfohlen.

Punkt 3) Es muss auch auf Benutzer mit Farbsehschwächen Rücksicht genommen werden.

Bisher haben wir uns nur auf das Kontrastverhältnis konzentriert, aber wenn es um die Zugänglichkeit von Farben geht, reicht das Kontrastverhältnis allein nicht aus, denn, wie wir gesehen haben, ist das Kontrastverhältnis nicht der einzige Faktor, der bei der Zugänglichkeit von Farben berücksichtigt werden kann,Rücksichtnahme auf Benutzer mit FarbsehschwächenDenn es muss auch Folgendes berücksichtigt werden

Im Folgenden sehen Sie beispielsweise eine Reihe von Schaltflächen, die häufig in E-Mail-Formularen auf Websites usw. zu finden sind. Bei beiden Schaltflächen entspricht das Kontrastverhältnis zwischen Hintergrundfarbe und Textfarbe einem AA-konformen Farbschema.

◆ Kontrastverhältnis AA-konforme Tasten

Man könnte meinen: "Nun, das Kontrastverhältnis erfüllt die Kriterien, also ist die Zugänglichkeit gewährleistet", aber es ist noch zu früh, um das zu beurteilen, denn diese Schaltfläche hatFarbsehen Typ D (Dichromatopsie Typ 2)werden Sie folgendes sehen.

◆Tastensehen bei Farbsehen Typ D

So,Die beiden Tasten haben eine ähnliche Farbe und sind auf den ersten Blick schwer zu unterscheidenDas bedeutet, dass nicht nur das Kontrastverhältnis, sondern auch die Eigenschaften des Farbsehens bei der Erstellung eines Farbschemas berücksichtigt werden müssen.

Auch im Hinblick auf die Berücksichtigung von Nutzern mit Farbsehschwächen,Sicherstellen, dass Informationen nicht nur auf der Grundlage von Farbunterschieden vermittelt werden.Auch dies ist ein wichtiger Punkt, den es zu berücksichtigen gilt.

Der Kontrast kann vom Benutzer geändert werden, wenn Uniweb.

Wenn Sie nicht über die Ressourcen für eine Kontrastprüfung auf Ihrer eigenen Website verfügen, können Sie unsereZugänglichkeitswerkzeug "Uniweb"Wir empfehlen die Implementierung von Uniweb, die Ihrer Website eine Reihe von Zugänglichkeitsfunktionen hinzufügt, indem sie eine einzige Codezeile in den Quellcode Ihrer Website einfügt.taggleiche EinführungEs handelt sich um ein Plug-in-Tool, das

Die Hauptmerkmale von Uniweb sind,Beim Durchsuchen von Websites auf der Benutzerseite können verschiedene Funktionen für die Barrierefreiheit genutzt werden.Es gibt einen Punkt: Zu den zu implementierenden Zugänglichkeitsfunktionen gehört die Möglichkeit, den Kontrast einzustellen, so dass die Nutzer mit einem einfachen Klick zwischen "invertierter Farbe", "dunklem Kontrast" und "hellem Kontrast" wechseln können, um die Lesbarkeit zu verbessern.

◆Uniweb Kontrastwechsel-Funktion

Darüber hinaus zeigt der VerwaltungsbildschirmDiagnoseberichte über die Einhaltung der Zugänglichkeit einer Website.Der Bericht zeigt die Konformitätsstufe (A, AA, AAA) für jeden Punkt sowie die spezifischen Änderungen des Codes für die Bereiche, die Korrekturmaßnahmen erfordern,Ein effizientes Arbeiten ist möglich, ohne dass mit verschiedenen Verifizierungswerkzeugen etc. mühsam nach Korrekturpunkten gesucht werden muss.。

◆Uniweb Verwaltungsbildschirm

Untere rechte Ecke dieses Artikels.Klicken Sie auf das blaue kreisförmige Menschensymbol".Neben der Kontrastumschaltung gibt es noch eine Reihe anderer Funktionen für die Barrierefreiheit, also schauen Sie sich die Uniweb Funktionen in Aktion an.

Zusammenfassung

Auf Websites mit vielen Informationen, die aus Bildern gewonnen werden,Gewährleistung der Sichtbarkeit und Lesbarkeit für alle NutzerSie müssen daher wissen, welche Überlegungen für Nutzer mit eingeschränktem Sehvermögen, ältere Menschen und Menschen mit Farbenblindheit erforderlich sind, und Ihre Website entsprechend barrierefrei gestalten.

Kontrastprüfer sind sehr nützliche Werkzeuge, um barrierefreies Design zu erreichen, obwohl viele davon in kostenpflichtigen Tools zur Überprüfung der Barrierefreiheit enthalten sind,Die kostenlosen Tools reichen nur für die Kontrastprüfung aus.Beginnen Sie also so bald wie möglich mit der Überprüfung Ihrer eigenen Website.

Dieser Artikel konzentriert sich jedoch auf die Validierung des Kontrastverhältnisses im Rahmen der Barrierefreiheit im Web,Wenn Sie mehr über die Barrierefreiheit im Internet erfahren möchten, lesen Sie bitte frühere Artikel auf dieser Website sowie den Leitfaden zur Umsetzung der Barrierefreiheit im Internet, der von der Digitalagentur bereitgestellt wird.。

Referenz:Früherer Artikel "Welche Maßnahmen zur Barrierefreiheit im Internet müssen von Website-Betreibern umgesetzt werden?"、Leitfaden zur Umsetzung der Barrierefreiheit im Internet (Digitalagentur).

Außerdem ist unser Uniweb.Eine kostenlose Diagnose der Website Ihres Unternehmens ist ebenfalls möglich.Wenn Sie ein Unternehmen sind, das die Unterstützung der Barrierefreiheit für seine Website in Erwägung zieht, weil es sie einführt,Link untenSie können sich bewerben bei

Kostenlose Bewertung der Zugänglichkeit (@Uniweb)

Kontrast-Prüfer