EddieHubCommunity.github.io icon indicating copy to clipboard operation
EddieHubCommunity.github.io copied to clipboard

Published 20 hours ago • verified publisher icon EddieHubCommunity

Color Contrast Not High Enough

Open YuriDevAT opened this issue 2 years ago • 3 comments
trafficstars

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

Axe DevTools results showing 6 elements do not meet color contrast

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>

Get started today - link

How to solve

  1. Increase the value to a minimum of 19px AND set font-weight to a minimum of 700.
New values removes error
  1. 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. New value removes error

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

Paragraph showing error not meeting color contrast

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

Paragraph showing error not meeting color contrast

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

Heading showing error not meeting color contrast

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

Heading showing error not meeting color contrast

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

Button showing error not meeting color contrast

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

YuriDevAT avatar Nov 04 '23 12:11 YuriDevAT

Thank you yuri! Very helpful!

kkrishguptaa avatar Nov 06 '23 08:11 kkrishguptaa

  • [x] Issue 1 (#313)
  • [x] Issue 2 (#313)
  • [ ] Issue 3
  • [ ] Issue 4
  • [ ] Issue 5
  • [ ] Issue 6

kkrishguptaa avatar Dec 17 '23 06:12 kkrishguptaa

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

image

CodeTorso avatar Dec 26 '23 13:12 CodeTorso