Color Contrast Not High Enough

[YuriDevAT]

Description

Elements must meet minimum color contrast ratio thresholds to meet the WCAG 2 AA .

• 4.5:1 for small text - 14pt bold (19 CSS pixels), or
• 3:1 for large text - 18pt (24 CSS pixels)

Axe DevTools show that 6 elements do not meet color contrast on

Please find these elements and tips on how to improve in the next section 👇🏽

Screenshots

I will show two ways that are valid for all 6 elements, using the first element as an example.

TL;DR - How To Solve

1. Increase the value to a minimum of 19px AND set font-weight to a minimum of 700.
2. Change text-color to a minimum of #171717.

💡 Note: The black you are using #0F172A for the intro (Open Source community aimed at encouraging and promoting communication) would work just fine.

---

Element 1 - Link: <a><span>Get Started</span></a>

How to solve

1. Increase the value to a minimum of 19px AND set font-weight to a minimum of 700.

2. Change text-color to a minimum of #171717. 💡 Note: The black you are using #0F172A for the intro (Open Source community aimed at encouraging and promoting communication) would work just fine.

---

Element 2 - Paragraph: <p>Everyone is welcome to come and contribute to our open source projects.</p>

---

Element 3 - Paragraph: <p>Community of inclusive Open Source people - Collaboration 1st, Code 2nd! Join our GitHub Org.</p>

---

Element 4 - Heading 3: <h3>Discord</h3>

---

Element 5 - Heading 3: <h3>GitHub</h3>

---

Element 6 - Button: <button><span>Subscribe</span></button>

Additional information

Please find more information on color contrast issue and WCAG AA

https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=AxeFirefox
https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

[fi-krish]

Thank you yuri! Very helpful!

[fi-krish]

• Issue 1 (feat: improve accessibility of the project #313)
• Issue 2 (feat: improve accessibility of the project #313)
• Issue 3
• Issue 4
• Issue 5
• Issue 6

[CodeTorso]

Now the get started button just looks odd.

Can we have the background-color a bit more dark but the text as white??

This just looks more natural. I just feel like that, Not because I want to make my first PR in this project😄😄