So bestimmen Sie das genaue Kontrastverhältnis

Aufgrund des jüngsten Gesetzes zur Barrierefreiheit im Internet in meiner Region muss ich sicherstellen, dass ich mit einem angemessenen Kontrastverhältnis entwerfe.

Laut WCAG beträgt der Wert dieses Verhältnisses 4,5:1

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Wie finde ich das in Photoshop und Illustrator heraus?

Hat nichts mit der Frage zu tun, aber könnten Sie einen Artikel erklären/verlinken, der dieses Gesetz erklärt? Ich habe noch nie von einem Gesetz gehört, das Webdesign vorschreibt, also bin ich ziemlich neugierig.
Es ist gerade in Ontario, Kanada, in Kraft getreten. Hier ist die Info: ellsworthmedia.com/aoda-compliance-impact-website
Link zur aktuellen Verordnung. Es gilt für alle Organisationen mit mehr als 50 Mitarbeitern in Ontario und verlangt, dass sie ab diesem Jahr auf allen neuen Websites WCAG 2.0 Level A erfüllen und alte Websites bis 2021 umstellen.
Außerdem: Eine Referenz auf der WCAG-Website , die Links zur Leuchtdichteformel und zu Rechnern enthält. Soweit ich das beurteilen kann, verwenden sowohl der W3 als auch Adobe den sRGB-Farbraum zur Berechnung der Luminanzwerte, sodass Sie in der Lage sein sollten , einfach die L-Werte Ihres Farbinspektors zu verwenden, um festzustellen, ob das Verhältnis mindestens 4,5: 1 beträgt.

Antworten (2)

Von dieser Seite gibt es einen Link zu einem Kontrastrechner

Und wenn wir uns die Quelle ansehen, können wir verallgemeinern:

RsRGB = Red Component  / 255
GsRGB = Green Component / 255
BsRGB = Blue Component  / 255

Calculate luminance
R = is (RsRGB <= 0.03928) then RsRGB/12.92 otherwise ((RsRGB + 0.055)/1.055)^2.4
G = is (GsRGB <= 0.03928) then GsRGB/12.92 otherwise ((GsRGB + 0.055)/1.055)^2.4
B = is (BsRGB <= 0.03928) then BsRGB/12.92 otherwise ((BsRGB + 0.055)/1.055)^2.4

Luminance is (0.2126 * R + 0.7152 * G + 0.0722 * B)

getContrastRatio {
L1 = Luminance of color1;
L2 = Luminance of color2;
round((max(L1, L2) + 0.05)/(min(L1, L2) + 0.05)*10)/10;
}

Der Code ist in diese Seite eingebettet, Sie können ihn mit einem Lesezeichen versehen oder lokal speichern, falls die Seite ausfällt.

Persönlich teste ich UIs mit einer Kontrastprüfungs-App mit dem treffenden Namen „Contrast“:

Kontrast-App in Aktion

Sie können nicht nur Ihre Dateien, sondern alles auf dem Bildschirm überprüfen, einschließlich anderer Websites – alles auf dem Bildschirm!

Es ist nicht sehr praktisch, reine Kontrastverhältnisse zu messen, weil es kognitiv anstrengend ist, Zahlen müssen im Kopf verglichen werden, 5.2 > 4.5 ?so dass Apps eine Abstraktion erfunden haben – Werte basierend auf Buchstaben, zum Beispiel, Contrast Mac App würde mindestens „ AA “ geben.4.5:1

https://usecontrast.com/guide

Es ist eine kostenpflichtige Mac-App, aber sie dient auch als Farbauswahl für den Bildschirm:

Kontrast Mac-App

So bestimmen Sie das genaue Kontrastverhältnis
AntwortenHierDatenschutz-Bestimmungen1y, 0v