creativecommons / legaldb

CC Legal Database: curated repository of Case Law and Scholarship data from around the world in a Django based website.

Home Page:https://LegalDB.CreativeCommons.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Screen Shot 2020-08-13 at 09 36 56

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 :(
Screenshot from 2020-08-17 08-28-11

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 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!

@kgodey @krysal @panchovm I am replacing the dark turquoise with forest green (RGB(34,139,34)).Kindly check and confirm the RGB values.SO that I can make the changes.

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 is RGB(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.