Checkout Seite

Vielen Dank @Lena_Spreadshop!

Meine Shop-ID: 100267904

Mein eigenes Farbschema entspricht im Grunde genau dem Farbschema “Minimal”. Es sollte daher eigentlich funktionieren :slight_smile:

farbschema

Wäre absolute Klasse wenn das endlich funktionieren würde und ich einen zu meiner Seite passenden Checkout haben könnte.

Edit: Muß ganz ehrlich sagen, dass ich dieses Tool nicht verstehe: https://contrast-ratio.com/ :wink:

Gruß David

1 Like

:joy::joy::joy: Ja, da finde ich ehrlich gesagt einen HTML oder CSS Code einfacher zu verstehen.

Ihr könnt euch das alles auch direkt im Developer Tool anschauen.

Shop ID 100267904: Das Rot ist etwas heller als unser default rot und hat ein Verhältnis von unter 4 (Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!). Unser default Rot liegt bei 4.82

Sop ID 100245785: Weiß und Orange passt auch nicht: Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!

Shop ID 100381610: Weiß und Blau ist okay und wird so auch im Checkout angezeigt.

Vielen Dank @Lena_Spreadshop!

Jetzt versteh ich das Tool - die Ratio betrifft jeweils nur eine Farbe.

Habe jetzt eine Viertelstunde probiert welches Pink brauchbar ist mit dem Tool und knalle echt gleich durch. Keine einzige rötliche Farbe passt außer euer knalliges Rot. Schön dass man passende Farben so testen kann, aber ich finde es ehrlich gesagt unzumutbar so vorgehen zu müssen um ein passendes Farbschema zu finden, nur um Link- und Buttonfarbe zu ändern. Hin und her kopieren mit einem externen Tool. Und ich finde noch nicht ein mal passende Farben mit dieser Ratio-Geschichte, welche in meinem Fall EXTREM überflüssig ist, da es sich hier um pinkfarbende Elemnte auf weißem Untergrund handelt. Es ist doch nur ein Pink, ein ganz simples Pink! Und es passt nicht, nicht ein einziges ähnliches Pink, nichts… Ich nehme mal heute Abstand davon denn das macht mich grad alle und ich schreib sonst etwas falsches.

Vielen Dank für deine Hilfe und Mühe @Lena_Spreadshop!

Edit: Grad noch eingefallen, dass Du das Developer Tool erwähnst mit Screenshot wo man die Ratio checken kann während man die Farben durchtestet. Was ist das Developer Tool? :wink:

Edit vom Edit: Alles klar, habs, das Tool im Browser!

Heiliges Lottchen ich will doch nur einen pinken Button… :see_no_evil:

Gruß David

Ich passe das mal im Blogpost an, aber: ihr müsst die richtige Farbe testen. Das ist die zweite: “Wichtigste Buttons, aktivierte Elemente” und nicht “Sekundäre Buttons, Text”.

Übrigens… wir machen das mit dem 4.5:1 Verältnis nicht zum Spass und/oder weil wir euch alle ärgern wollen sondern weil wir wollen, dass es eure Kunden (auch welche mit Seh/Farbschwäche) es leichter haben bei euch im Shop zu kaufen.

Ok, wenn ich das jetzt so richtig verstanden habe dann muss die “Contrast Ratio” MINDESTENS einen Wert von 4.5:1 aufweisen. Alles was drunter ist wird nicht angenommen, jeder Wert drüber wird schon angenommen?

Ich konnte mit dem Tool jetzt auch keinen einzigen Orangeton finden, der angenommen werden würde. Die liegen alle unter dem angegeben Wert.

Und ja, im Testshop wurde der Blauton nun angenommen.

@anon35123748

Geh auf Deinen pinken Button im Shop und klicke die rechte Maustaste. Da müsste Dir ein Fenster erscheinen und ganz unten steht die “Stimme” ----> Inspect. Auf italienisch steht da " Ispeziona". Auf deutsch müsste dann da “Inspizieren” oder “Prüfen” stehen.
Wenn du da dann draufgeklickt hast, öffnet sich der “Developer Tool”. Und der ist sehr praktisch um verschiedene Sachen auszutesten, da du hier Farben ändern kannst, Code ändern kannst OHNE dass sich der Quellcode ändert. Wenn du die Seite dann wieder neu lädst, ist alles wieder beim alten. Es rentiert sich also, da mal bisschen rumzuschauen und rumzuspielen.

@Lena_Spreadshop
Danke für den Tip den Developer Tool für den Kontrast Ratio zu benutzen. Bei mir jedoch erscheint der Kontrast Ratio da nicht. Hier ein Screenshot:
screen
Ist der Kontrast Ratio bei Dir automatisch erschienen, oder hast du dafür irgendetwas spezielles aktiviert?

1 Like

Das glaube ich Dir, hat schon seinen Sinn irgendwo (!) mit der Ratio, aber nicht bei Pink auf Weiß! Das ist eine Kontrastbombe, ähnlich wie schwarz und weiß. Da macht die Ratio keinen Sinn und ist fehlerhaft. Denn schon wenn ich euer Rot nur MINIMAL ändere stimmt die Ratio nicht mehr. Welche Maschine/Mensch/Logik bestimmt hier einfach, das diese Farbe nicht mehr cool für den Kunden ist?

Schauen wir uns mal rückblickend an was man alles tun muß um die Farbe des Bestellbuttons zu ändern :wink: Wieviel Fragen Du dazu beantworten mußtest und wieviel Zeit und Mühe du mit Erklärungen dazu aufbringen mußtes :wink: Das geht so einfach nicht, sorry! Und wir reden hier vom wichtigsten Bereich der Shops - dem Checkout. Und wir reden hier nur von einer einzigen Farbe die man ändern will… Und ich habe übrigens keine Anzeige für die Ratio im Developer Tool, gibts da nicht und ich habe die neueste Chrome Version.

Ich geh mal auf Distanz zu diesem Thema. Hab unfaßbare schlechte Laune durch diese Geschichte heute - So sollte das nicht sein…

Lieben Dank @Lena_Spreadshop

Gruß David

Bitte mal in Chrome benutzen, da ist es am einfachsten:
Rechtsklick auf untersuchten Button > Untersuchen > und dann bei color: klicken, dann siehst Du das Verhältnis.

Das ist korrekt!

Bei Chrome für Mac scheint es das Ratio Feature nicht zu geben.

Ich habe jetzt trotz allen Übels die Knarre von der Schläfe genommen und weiterprobiert. Ein Fast-Pink ist gefunden und es entspricht der vorgebenen Ratio. Mal schauen ob der Shop das jetzt übernimmt, dauert immer etwas.

Ansonsten ist für alle Mac User eher dieses Tool zu empfehlen. Farben sind auswählbar und man sieht sofort den Ratio-Wert:
https://webaim.org/resources/contrastchecker/

Melde mich gleich zurück, bin gespannt.

Gruß David

1 Like

Doch, ich habe einen Mac und es funktioniert ohne Probleme :slight_smile:

Oder so, wenn Du das empfehlen kannst :ok_hand:

Yes! Hat endlich funktioniert. Gibts ja nicht :smiley:

Vielen Dank für deine ganze Hilfe und Geduld @Lena_Spreadshop!

Gruß David

1 Like

OH danke für den Link! Hatte zwischenzeitlich schon aufgegeben, da bei mir das Kontrast Ratio im Developer Tool auch nicht funktioniert.
@Lena_Spreadshop

Ja hab das alles befolgt, erscheint aber nicht. Hatte mich informiert an was das liegen könnte, schreibt jeder was anderes und ist jetzt auch Wurscht. Der Link von @anon35123748 tut’s auch.

Also Ergebnis bei mir ist, dass es keinen geeigneten Orangeton gibt, der das Kontrast Ratio befolgt. Zur Auswahl bleiben mir jetzt ein Dünnpfiff braun oder ich nehme einfach Schwarz. Dann werde ich wohl einfach Schwarz nehmen, auch wenn es sich nicht mehr vom Rest abhebt.
@Lena_Spreadshop
Ist dieses Kontrast Ratio Schema in naher Zukunft für den gesamten Shop geplant, oder bleibt es nur bei der Checkout Seite? Weil wenn ja, kann man sich schon mal psychisch drauf einstellen.

Ja Orange ist tricky, da es zu hell ist für diese Ratio-Geschichte.

Habe nur diese Varianten finden können, etwas dunkel aber immerhin. Vielleicht kannst Du damit etwas anfangen:

#D1481A
#D04416
#C25400
#D14200

Gruß David

1 Like

Sonst gibt es auch noch dieses Tool hier: Accessible Color Generator: High-Contrast Color Suggestions

Da mach ich doch gleich mal ein Toolbox Artikel draus :wink:

2 Likes

Sollte dann bei mir auch aber die Ratio wird ums Verrrecken nicht angezeigt. Hast Du die neuste Chrome-Version?

Gruß David

Okay, na das Farbenproblem ist ja tatsächlich gelöst und die neuen Möglichkeiten dazu sind tatsächlich ein Fortschritt, denn kaum etwas wünschte ich mir mehr als die Conversion Colors im Checkout zu ändern.

Vielleicht kann man ja in Zukunft einen “Kontrast Ratio Scanner” gleich bei der Bearbeitung des eigenen Farbschemas integrieren um solche Threads in Grenzen zu halten :slight_smile:

Gruß David

Vielen Dank @anon35123748 :slightly_smiling_face:. Leider sind alle Farbwerte eher braun. Schaut nicht gut aus in Verbindung mit dem Logo, welches ja im Headerbereich zu sehen ist. Also passt überhaupt nicht. Dann lieber Schwarz.

@Lena_Spreadshop
Vielen Dank für den Link zu dem Tool :slightly_smiling_face:. Leider wird das braun auch dort nicht orangener :wink:. Schade dass man sich den Hintergrund von der Checkout Seite farblich nicht anpassen kann. Weil mit einem dunklen Hintergrund würde das dann passen mit dem “Kontrast-Ratio-Wert” und der Farbe Orange.
In jedem Fall vielen Dank für alle Infos!

Das gebe ich mal so weiter!

1 Like

Nicht in naher Zukunft, da es erstmal andere Projekte gibt, an denen wir arbeiten müssen. Aber jede Verbesserung wird dieses Kontrast-Verhältnis mit einbeziehen.