Improve contrast ratio of some links when the design is ready

[cindyli]

Describe the bug

Running lighthouse report on "Inclusion Challenges" page and News and Views post pages will report low contrast ratio on:

1. “Nomination form” and "contact form” links on “Inclusion Challenges” page. They are currently blue on white;
2. All tags (“AI”, “Inclusion” and “Smart Cities”) in the “Tags” sections on post pages. They are currently blue on orange;
3. All links in the main article on “Learn” page and "Initiatives" page. They are currently blue on white;

To Reproduce

Steps to reproduce the behavior:

1. Go to these pages and run lighthouse report;
2. Check accessibility section for reported issues.

Expected behavior

These links should have higher contrast ratio.

[Raunaksingh100]

@cindyli @greatislander

hi i am facing this problem when i add this COMMAND "NPM RUN START" plz anyone tell me how i run this project in my local plz help,
see in the screenshot for the better understanding....

[cindyli]

hi i am facing this problem when i add this COMMAND "NPM RUN START" plz anyone tell me how i run this project in my local plz help,
see in the screenshot for the better understanding....

@Raunaksingh100, did you hit the problem at running npm run start on a Windows platform? Did you use Powershell or Windows traditional CMD? If it's on Windows, try this sequence of commands instead of using npm run start:

npm run clean
SET ELEVENTY_ENV=development
npx eleventy --serve --port=3000 --config=eleventy.config.js

[Raunaksingh100]

hi i am facing this problem when i add this COMMAND "NPM RUN START" plz anyone tell me how i run this project in my local plz help,
see in the screenshot for the better understanding....

@Raunaksingh100, did you hit the problem at running npm run start on a Windows platform? Did you use Powershell or Windows traditional CMD? If it's on Windows, try this sequence of commands instead of using npm run start:

npm run clean
SET ELEVENTY_ENV=development
npx eleventy --serve --port=3000 --config=eleventy.config.js

For npm start we have to change the start command in package.json

Is this correct or wrong ???

Or simpley add this commands in poweshell
??

[cindyli]

For npm start we have to change the start command in package.json

Is this correct or wrong ???

Or simpley add this commands in poweshell
??

You don't need to change package.json. Just run these commands in Powershell.

[Raunaksingh100]

thanks its works @cindyli thanks a lot
can we review my pr i am facing some problem here th link of my pr
inclusive-design/idrc#39

[TeddTech]

After implementing the design changes suggested in #322 to improve the visual appearance of the We Count website all of the contrast ratio issues mentioned still persist and now additionally includes the Tag Filter tags on Views page.

To reproduce this:

• Go to the deploy preview of PR fix: improve visual appearance of the website (resolves #322) #334
• Navigate to the Views page
• Expand Tag Filters and select one or more tags
• Click "Apply Filters" button
• Run lighthouse
• See referenced contrast ratio issues in the accessibility section of the lighthouse report

[cindyli]

@uttaraghodke, @lliskovoi: following @TeddTech's comment about the persistence of the contrast ratio problem, we discussed this in an email thread before and @jobara's research result gave a good summary:

In WCAG 2.1, it defines the minimum contrast ratio to be 4.5:1 except for the case of Large Text (contrast ratio 3:1), incidental and logotypes.

What is Large Text? Large scale text is defined as 18 point or 14 point bold.

What is a point (pt) on a digital device? Well that’s confusing. (See: wcag issue #181). That discussion lead to an update to Understanding WCAG 2.1 document; which uses the CSS calculation and is based off a 16px base font if I’m not mistaken. 1pt = 1.333px, 14pt ≈ 18.5px and 18pt ≈ 24px.

The cause of the problem still persists after the design change that increases the article font size from 16px to 18px for the desktop layout because the size of the large text in WCAG 2.1 spec is 24px. Moreover, the changed font size for the mobile layout is even smaller.

I wonder if it would be more reasonable to increase contrast ratios by picking dark font colors or lighter background colors.

[cindyli]

At today's meeting, the link colors are decided to change to:

• Link text when the background is white: 5879A0
• Link text when background is yellow (tags and link hover/focus): 4D6B8D