Giters

jsonresume / resume-website

Website for JSON Resume. 🏡 DEPRECATED - SEE MONO

Home Page:https://github.com/jsonresume/jsonresume.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fix color contrast ratio of some content

SethFalco opened this issue · comments

commented

Some content on the website doesn't adhere to the W3A guidelines for contrast ratio.

Ideally, we should ensure all content has at least a contrast ratio of 4.5. This will ensure it's nice and easy to read for everyone, especially users with issues regarding vision.

Currently, the homepage has content with a background of #FFF and foreground of #AAA. This has a contrast ratio of 2.32.

Source: https://contrast-ratio.com/#%23aaa-on-%23fff

More information:
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

commented

Just looked it up.

Every page:

  • Footer Text -> #BBBBBB

Home Page:

  • Button borders -> #DDDDDD
  • Button borders hover -> #AAAAAA

Schema page:

  • Code block text -> #BBBBBB
  • Code block version text -> #CCCCCC

Themes page:

  • Preview buttons -> same as home page

Team page:

  • Social buttons -> #999999

Blog:

  • Post date text -> #999999

These all fail.

#767775 is the minimum amount of grey I could find that passes the contrast ratio of 4.5:
https://contrast-ratio.com/#%23767775-on-%23fff

However, #767775 is visually close to the current default text color of #222222 when it comes to text content. So it seems like there needs to be a visual (aesthetic) sacrifice in exchange of better accessibility.