This repository was archived by the owner on Sep 11, 2024. It is now read-only.
This repository was archived by the owner on Sep 11, 2024. It is now read-only.
Color Contrast Not High Enough #302
Description
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
- Increase the value to a minimum of
19pxAND set font-weight to a minimum of700. - 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
- Increase the value to a minimum of
19pxAND set font-weight to a minimum of700.
- 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