Change:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --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: 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:” !
Thanks for pointing this out it is incredibly hard to read. How about the following? ! cc:
Looks a lot better! Does it conform to the 4.5:1 contrast ratio suggested in a previous FCC lesson?
Good question and no, it's not quite enough. I tweaked it a bit further to which looks like this: ! That passes.
Now, It looks a lot better.
I am opening this issue up to . The changes mentioned by are what is expected.
For first timers, this appears to be the lines of code you want to focus on to change based on what is mentioned in
I would like to take this if it's open for grabbing. It will be my first time contributing to an open source project.
HELLO I WOULD LIKE TO WORK IF ITS OK . ITS MY FIRST TIME ,SO PLEASE GUIDE ME THROUGH
I have been attempting to fix this issue. My first attempt to modify the code suggested by was rejected because the file in that location is being removed. My new approach is to use the prism- file. Here is my proposed addition: 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 ?) I also only noticed this issue for , but the css rule that currently applies to this block also targets , , and . 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?
Hi 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: See lines 49 through 57. How does QA work? Are you able to preview the website directly from GitHub?
Thanks, that looks good. Could you push them onto your PR? 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.
I was able to figure out how to use GitPod. It looks like the changes work. ! I noticed that in prism-, there is already a rule for , , and . 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. !
You can see the PR commits here I recommend taking a look at the contribution docs, they cover this sort of thing:
Ah, I see, you mean on FCC. Here it is:
thank you for your interest in contributing to freecodecamp as our contributing docs say: 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:

Discussion:
color: #7ec699; } <ins> /* CSS code block strings have low contrast in night mode. This attempts to increase contrast above 4.5:1 */ .night .language-css .token.string, .night .style .token.string { color: #ec9126; background: hsl(0 0% 100% / 0.12); } </ins> .night .token.operator, .night .token.entity, .night .token.url {