Wie wähle ich die Schriftfarbe vor gelbem Hintergrund?

Es gibt ähnliche Fragen wie diese und diese .

Diese Frage ist jedoch aufgrund unterschiedlicher Konstruktionseinschränkungen anders.

Dies ist die Schnittstelle für unser Spiel. Wenn der Benutzer ein Wort löst, zeigen wir einen gelben Stern wie beim Wort MOM. (Ignorieren Sie bitte die verzerrten Freigabe- und Menüsymbole!)

Geben Sie hier die Bildbeschreibung ein

Wir suchen nach Alternativen, um ein gelöstes Wort hervorzuheben. Der unten herausstehende Stern fühlt sich unsauber an.

Unsere aktuelle Wahl besteht darin, einen gelben Leuchteffekt unter den Buchstaben zu integrieren – ähnlich wie dieses weiße Leuchten:

Geben Sie hier die Bildbeschreibung ein

Anstelle von Weiß stimmt unser Leuchten mit der gelben Farbe des Sterns überein, aber unser Designer hat Mühe, eine Schriftfarbe zu finden, die zum Rest des Designs passt.

Die verknüpften Fragen schlagen Kontrast als Schlüssel zum Anzeigen von Schriftarten auf einem hellen Hintergrund vor, aber Schwarz, Braun und Grau kollidieren mit den anderen Farben. Weiß versagt, weil der Kontrast nicht hoch genug ist.

Was ist also der beste Ansatz, um eine kontrastreiche Farbe zu finden, die auch andere Farben im Design ergänzt?

Warum nicht einfach einen etwas helleren grün/gelben Stern mit Transparenz machen, der in die Mitte des grünen Blocks geht? Funktioniert das nicht für Ihr Design? Wenn Sie Crayola Spring Green nehmen, ist es fast gelb :D
@AshleePalka stimmte zu
@AshleePalka danke für den Vorschlag, das ziehen wir auch in Betracht.

Antworten (3)

Muss die Schrift weiß bleiben?

Sie könnten den Typ einfach auf Gelb setzen.. Entfernen Sie den Stern.

Geben Sie hier die Bildbeschreibung ein

Oder wenn Sie dieses äußere Leuchten wollten, gelbe Schrift mit einem weißen Leuchten …

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Für mich ist gelber Text mit einem weißen Schimmer schwer zu lesen (und ich habe angeblich ein gutes Sehvermögen)
:) alles ist relativ. Meine Sehkraft lässt mit dem Alter nach, aber ich habe keine Probleme mit den oben genannten Problemen. Und ich würde diesen Hintergrund wirklich grün nennen, nicht gelb.
Danke dafür! Sie denken also, dass es zu viel wäre, den Hintergrund von grün auf gelb zu ändern? Wir befürchten, dass die gelben Buchstaben, wie @AshleePalka sagte, für die Augen schwieriger wären.
@Crashalot verstehe ich nicht wirklich. Wollen Sie damit sagen, dass Sie diesen grünen Hintergrund ändern? Wenn der Hintergrund nicht grün sein soll, ist es wirklich schwierig zu wissen, was funktioniert oder nicht funktioniert, ohne den tatsächlich zu verwendenden Hintergrund zu sehen. Wie meine Antwort zeigt ... sehe ich kein Problem mit einem der Bilder, die ich gepostet habe.
sorry für die verwirrung! soll sagen, dass wir auch darüber nachdenken, die Hintergrundfarbe zu ändern. das könnte sauberer sein, da keine anderen visuellen Elemente eingeführt werden müssen (und auch Lesbarkeitsprobleme bei Buchstaben mit Schatten/Glühen beheben würden).
Na dann ja.. Gelb auf Gelb.. oder Weiß auf Gelb ist möglicherweise zu kontrastarm :)
Jup, einverstanden, deshalb die Frage nach Rat, wie man die richtige Schriftfarbe für einen gelben Hintergrund findet. Danke nochmal für deine Hilfe!

Wenn ich Ihre Frage verstehe, besteht das Problem darin, dass Farben, die hell genug sind, um sich vom Hintergrund abzuheben, dazu neigen, sich mit dem Weiß zu vermischen?

Sie könnten dies möglicherweise lösen, indem Sie einen leichten „Hold-off“ um den Text legen, bevor das äußere Leuchten beginnt. Dadurch bleibt der Kontrast zwischen den Buchstaben und dem Hintergrund erhalten, während das Leuchten zeigt, dass die Buchstaben hervorgehoben sind.

Etwas wie das:

Geben Sie hier die Bildbeschreibung ein

Ich habe zur Veranschaulichung ein einfaches Glühen verwendet, aber ich denke, es würde mit der Art von ausgefallenem Glühen, die Sie vorschlagen, noch besser aussehen. Wenn Sie diesen leuchtenden Effekt animieren könnten, könnten Sie wirklich an etwas dran sein!

Hoffe das hilft.

danke für den Vorschlag! Auf jeden Fall auch nach Glühideen suchen, aber befürchten, dass dies die Lesbarkeit beeinträchtigen könnte.
Ich bin verwirrt. Ihre Frage erwähnt ausdrücklich das Hinzufügen eines gelben Leuchtens.
sorry für die verwirrung! Ja, das Leuchten ist unser bevorzugter Ansatz, aber wir sind immer noch besorgt über die Lesbarkeit, selbst bei all den wunderbaren Ideen, die hier gepostet werden. soll sagen, dass wir auch andere Ideen in Betracht ziehen, aber ich weiß es wirklich zu schätzen, dass Sie sich Zeit nehmen, um ein Konzept zu simulieren!

Ich bin vor kurzem auf diese Aufnahme bei Dribbble gestoßen und fand sie wirklich interessant, wenn es darum geht, eine bestimmte Farbe in ein Farbschema einzufügen:

Sie verwendet verschiedene Photoshop-Mischmodi, um die Hauptfarbe Ihres Designs mit der gewünschten Farbe (auch bekannt als Gelb) zu überlagern, und spielt mit der Deckkraft der Hauptfarbebene, bis Sie etwas finden, das richtig aussieht.

https://dribbble.com/shots/166246-My-Secret-for-Color-Schemes

Was das Leuchten betrifft, würde ich persönlich darüber nachdenken, einfach die Farben der grünen Blöcke selbst in Gelb zu ändern, oder eine grüne Farbe gegen abwechselnde Grüns, um zu zeigen, dass sie zusammengehören ... nur ein Gedanke. Wenn Sie ein Leuchten verwenden, würde ich es um die Buchstabenblöcke als Ganzes anstatt um einzelne Buchstaben legen.

Bitte geben Sie nicht einfach einen Link als Antwort. Auch wenn es nur ein paar Zeilen sind, geben Sie einen Auszug der im Link angegebenen Lösung an. Auf diese Weise ist Ihre Antwort immer noch von Wert, falls der Link zu einem späteren Zeitpunkt unterbrochen wird. Darüber hinaus sieht eine Antwort mit einem prominenten Link oft wie Spam aus und kann aus diesem Grund zu Downvotes und Flags führen. Danke für Ihr Verständnis!
Danke @Beneeb10! Wir haben überlegt, die Hintergrundfarbe auf gelb (oder orange, passend zu den „gelösten“ Buchstabenschaltflächen unten) zu ändern, hatten aber zwei Bedenken: (1) farbenblinde Benutzer sehen möglicherweise den Unterschied nicht und (2) ändern den grünen Hintergrund in Gelb/Orange könnte zu stark und überwältigend wirken?
Wie wähle ich die Schriftfarbe vor gelbem Hintergrund?
AntwortenHierDatenschutz-Bestimmungen1y, 0v