Syransong / portfolio-2022

0 stars 0 forks source link

Links, buttons and footer do not have a passable contrast ratio #6

Open Syransong opened 1 year ago

Syransong commented 1 year ago

Description

Some links, button elements and the footer do now have a sufficient contrast ratio between the text colour and background colour. As a result, this does not pass the PageSpeed Insights Accessibility check (current score for home page is 92).

We would want to ensure all elements on the page have high enough contrast so users with low vision can still navigate the website. In addition, it would make the website overall easier to read for everyone.

A possible solution is using a darker colour for the elements that do not have enough contrast. Ideally, the elements would meet the WCAG AAA standard and at minimum meet the WCAG AA standard.

Steps to Reproduce

  1. Navigate to the Google PageSpeed Insights (https://pagespeed.web.dev/)
  2. Enter the web page URL in the input field, karinasong.com
  3. Click the "Analyze" button
  4. Scroll to the Accessibility audit section of the results page.

Expected Result

There are no warnings about low-contrast elements on the page.

Actual Result

For the home page, there are 5 elements that have the following warning, "Background and foreground colours do not have a sufficient contrast ratio".

Environments

This bug is present in all environments across all browsers.

Screenshots

Google PageSpeed Insight Results: Screen Shot 2023-03-19 at 11 22 20 PM

Syransong commented 1 year ago

Changed the elements with a low contrast to a darker colour (hex code #23727B). Considering removing "View Project" link as the entire card is clickable, rendering the link redundant

Syransong commented 1 year ago

Ran Google Page Speeds checker on home page and no warning about low contrast elements