Increase contrast in colors used in "My account" #5257
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javierm
force-pushed
the
focus_contrast
branch
from
159d7ab
to
a6ae389
Compare
javierm
force-pushed
the
increase_contrast
branch
from
05043e7
to
fc24293
Compare
javierm
force-pushed
the
focus_contrast
branch
from
a6ae389
to
ebbae45
Compare
javierm
force-pushed
the
increase_contrast
branch
from
fc24293
to
fd4382f
Compare
javierm
force-pushed
the
focus_contrast
branch
from
ebbae45
to
0ffe3c6
Compare
javierm
force-pushed
the
increase_contrast
branch
2 times, most recently
from
3bcf17d
to
375b1e0
Compare
javierm
force-pushed
the
focus_contrast
branch
2 times, most recently
from
0fbaeba
to
64c7132
Compare
javierm
force-pushed
the
increase_contrast
branch
from
375b1e0
to
7d3cc51
Compare
javierm
force-pushed
the
focus_contrast
branch
from
64c7132
to
64edfe5
Compare
The color we were using didn't have enough contrast against a white background, which made it harder to read texts like "Remove map marker" or "Erase my account". Since the new color is almost identical to the color we were using on hover and for the border, we're changing the color on hover as well, while IMHO it's no longer necessary to use a different color for the border.
This way it'll be easier to change it.
Not all the colors initialjs uses by default provide enough contrast against a white text. The default initialjs colors are: ["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"] We're replacing them with colors containing less luminosity when necessary in order to get a 4,5:1 contrast (it could be argued that a 3:1 contrast is enough when the icons are big, but that isn't always the case and more contrast doesn't hurt): ["#16836d", "#12826c", "#896f06", "#a06608", "#1e8549", "#1e8549", "#b35e14", "#c75000", "#207ab6", "#2779b0", "#de2f1b", "#c0392b", "#9b59b6", "#8e44ad", "#6c767f", "#34495e", "#2c3e50", "#66797a", "#697677", "#d82286", "#c93b8e", "#db310f", "#727755", "#8a6f3d", "#8a6f3d", "#a94136"] Since initialjs doesn't provide a way to change these colors using JavaScript, we're changing them in Ruby, following the same algorithm used by initialjs.
We were displaying the alt text using the same color as the background color, which made it impossible to read it when the logo didn't load (for whatever reason). Using the same color as the text, like done in the admin section, solves the issue.
javierm
force-pushed
the
increase_contrast
branch
from
7d3cc51
to
ae4b07d
Compare
taitus
approved these changes
Oct 10, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
References
Objectives
Visual Changes
Before these changes
After these changes