Freecodecamp: Low contrast on "Divide the Grid Into an Area Template"

[EliBCC]

Describe your problem and how to reproduce it:
The exercise “Divide the Grid Into an Area Template” has a section where code is displayed. However, it is in a dull yellow font on a black background, and is difficult to read.
I would like to request that the font color be changed to a higher contrast color.

Add a Link to the page with the problem:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/divide-the-grid-into-an-area-template

Tell us about your browser and operating system:

• Browser Name: Chrome
• Browser Version: 86.0.4240.75 (Official Build) (64-bit)
• Operating System: Windows 10

If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
See the text below “grid-template-areas:”

[ojeytonwilliams]

Thanks for pointing this out @EliBCC, it is incredibly hard to read. How about the following?

cc: @ahmadabdolsaheb

[EliBCC]

Thanks for pointing this out @EliBCC, it is incredibly hard to read. How about the following?

cc: @ahmadabdolsaheb

Looks a lot better! Does it conform to the 4.5:1 contrast ratio suggested in a previous FCC lesson?

[ojeytonwilliams]

Good question and no, it's not quite enough. I tweaked it a bit further to

.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
    color: #ec9126;
    background: hsla(0,0%,100%,.12);
}

which looks like this:

That passes.

[tushgaurav]

Now, It looks a lot better.

[RandellDawson]

I am opening this issue up to first timers. The changes mentioned by @ojeytonwilliams are what is expected.

[erictleung]

For first timers, this appears to be the lines of code you want to focus on to change based on what is mentioned in https://github.com/freeCodeCamp/freeCodeCamp/issues/39967#issuecomment-707610431

https://github.com/freeCodeCamp/freeCodeCamp/blob/05535d1e56bca7456b69510fa724493edf5fa1ca/client/static/css/prism.css#L102-L109

[csakou]

I would like to take this if it's open for grabbing. It will be my first time contributing to an open source project.

[Ironteen23]

HELLO I WOULD LIKE TO WORK IF ITS OK .
ITS MY FIRST TIME ,SO PLEASE GUIDE ME THROUGH

[EliBCC]

I have been attempting to fix this issue. My first attempt to modify the code suggested by @erictleung was rejected because the prism.css file in that location is being removed.
My new approach is to use the prism-night.css file. Here is my proposed addition:

.night .language-css .token.string,
.night .style .token.string,
.night .token.entity,
.night .token.operator,
.night .token.url {
  color: #ec9126;
  background: hsl(0 0% 100% / 0.12);
}

However, I have some questions.

I only noticed the issue with the css code block, but I suspect it may be a problem for other languages as well. I'm not sure how to tell which other languages may have this issue, or which classes to target (do I need to add .night .language-html .token.string,?)

I also only noticed this issue for .token.string, but the css rule that currently applies to this block also targets .token.entity, .token.operator, and .token.url. I'm not sure if the problem exists for these classes as well, or how to check.

Could someone with experience please comment on whether I should go ahead with my proposed changes, or make modifications?

[ojeytonwilliams]

Hi @EliBCC, my best guess is that your proposed change is a good one. Reason being, the change hits both the font's colour and the background. So, anywhere that was suffering from poor contrast will be fixed by your change, which is exactly what we want.

If you could make that change in your PR, we can QA it there.

[EliBCC]

Hi @EliBCC, my best guess is that your proposed change is a good one. Reason being, the change hits both the font's colour and the background. So, anywhere that was suffering from poor contrast will be fixed by your change, which is exactly what we want.

If you could make that change in your PR, we can QA it there.

I have made the changes here: https://github.com/EliBCC/freeCodeCamp/blob/master/client/src/components/layouts/prism-night.css
See lines 49 through 57.

How does QA work? Are you able to preview the website directly from GitHub?

[ojeytonwilliams]

I have made the changes here:

Thanks, that looks good. Could you push them onto your PR?

How does QA work? Are you able to preview the website directly from GitHub?

Almost, yeah. When you create a PR we can open a version of the site (including the PR's changes) in GitPod and preview it using that. It's neat.

[EliBCC]

I was able to figure out how to use GitPod. It looks like the changes work.

I noticed that in prism-night.css, there is already a rule for token.operator, token.entity, and token.url. None of the others have a background. I tried viewing the string without a background, too, and it looks fine to me. Is there a reason for the background in the first place? My preference would be to remove it for consistency.

[EliBCC]

I have made the changes here:

Thanks, that looks good. Could you push them onto your PR?

I'm not sure what you mean. I think the changes are pushed to my PR? Is the issue that I forked it instead of cloning?

[ojeytonwilliams]

You can see the PR commits here https://github.com/freeCodeCamp/freeCodeCamp/pull/39979/commits

I recommend taking a look at the contribution docs, they cover this sort of thing: https://contribute.freecodecamp.org/#/

[EliBCC]

You can see the PR commits here https://github.com/freeCodeCamp/freeCodeCamp/pull/39979/commits

I recommend taking a look at the contribution docs, they cover this sort of thing: https://contribute.freecodecamp.org/#/

Ah, I see, you mean on FCC. Here it is: https://github.com/freeCodeCamp/freeCodeCamp/pull/39987

[ieahleen]

@csakou @Ironteen23 thank you for your interest in contributing to freecodecamp

as our contributing docs say:

help wanted issues are up for grabs, and you do not need to seek permission before working on them. However, issues with the first timers only label are reserved for people that have not contributed to the freeCodeCamp codebase before. If these issues lack clarity on what needs to be done, feel free to ask questions in the comments.

you don't need to ask for permission, the first comprehensive PR is the one reviewed. You could start reading the contributing docs, if you have not yet: https://contribute.freecodecamp.org/