Replace DarkTurquoise with ForestGreen across all site
fcoveram opened this issue · comments
Problem
Since we defined to start with AA accessibility level, the DarkTurquoise
color does not match at all the contrast ratio for small and large text sizes. This is a brand concern that we have been discussing and we will come with the final brand solution after designing the .org site.
In parallel, I have been trying to adjust the DarkTurquoise
, but its nature is low-contrast and bright. Adjusting this color means changing it completely.
I assign myself a task (#48) to work on the interaction color for the DarkTurquoise
. But as I said above, the issue is bigger than the use on this site.
Solution
We can replace the DarkTurquoise
with a different brand color. And based on the AA level and contrast ratio required, the ForestGreen
seems to match better. For ForestGreen
, we do have an interaction color called BrighterForestGreen
. So all hover
states can use it without problem.
I duplicated the home page replacing the DarkTurquoise
with ForestGreen
. So please @krysal @kgodey @TimidRobot comment this ticket to see your thoughts about this change. The accessibility is a crucial dimension of Vocabulary and, unfortunately, the conversation about adjusting brand colors came after starting this project.
Mockup sample
I am fine with it.
Seems like a right move, I'm fine with it too.
Is this issue still open?
@Aakash2408 Yes, it is a change pending.
@krysal Can you assign this to me ?
@Aakash2408 Yes, it is a change pending.
I guess the changes need to be made in main.css which is under assets folder which I can't find :(
Am I right @krysal ?
@Aakash2408 I guess you cloned the default branch (master
) as is the natural way. The thing is that this projects is under a reimplementation with Django, a Python's framework, and integrating Vocabulary, the CC's design system, so the version discussed here is in the develop
branch and the file to edit is legal_db/static/styles.scss
, sorry for not warning of this before, hope this helps you get started.
Thanks for showing interest, your help is welcome!
Thanks for the information 😃.
@Aakash2408 I guess you cloned the default branch (
master
) as is the natural way. The thing is that this projects is under a reimplementation with Django, a Python's framework, and integrating Vocabulary, the CC's design system, so the version discussed here is in thedevelop
branch and the file to edit islegal_db/static/styles.scss
, sorry for not warning of this before, hope this helps you get started.Thanks for showing interest, your help is welcome!
Thanks for the information!
Hi @Aakash2408. The RGB value of Forest Green
is RGB(4,166,53)
and the Hex code #04A635
Hi @Aakash2408. The RGB value of
Forest Green
isRGB(4,166,53)
and the Hex code#04A635
ok Thanks! I will just change it and am going to make another pull request there are some issues with this pull request.
Hey @krysal, Need any more changes?
This is done. Closing.