Nodejs.dev: Button Text Has Bad Accessible Contrast

[ahmadawais]

The site buttons are probably going to be the most important part. We should make the colors accessible as per WCAG 2.0 guidelines for contrast accessibility. with at least AA contrast.

Suggestions:

[ahmadawais]

This is with background-color: var(--brand6); where as var(--brand5); looks better but still fails AA test. So, var(--brand6); it is.

[designMoreWeb]

I can take care of this today

[ahmadawais]

This issue actually is bigger than just the color change. Because when we change the color to --brand6 the inverse becomes way too dark.

That means we need a new way to have the inverse. I don't know maybe like this

And then at the bottom the button is completely different in the look and feel, I am not sure how it got there. I must have missed it in the review.

• We need consistent buttons
• We need a new inverse button on dark mode.

[ahmadawais]

Can someone point me to the design mockups of the site, I'd like to see how the buttons were designed there.

[giankotarola]

@ahmadawais https://www.figma.com/proto/lOxAGGg5KXb6nwie7zXkz6/NJ---Design-System

[ahmadawais]

Thanks for sharing @giankotarola sadly buttons are inconsistent in the design prototype as well.

Another button with different styles that we may need to make consistent.

[designMoreWeb]

@ahmadawais @giankotarola i’ll use the new buttons and add them to the code should have a PR by tomorrow working on it now

Assigning this to myself hope that is okay with everyone @benhalverson are we still accepting PR’s to staging for now or it has been halted till we get the file structure for the code reconfigured?

[ahmadawais]

@designMoreWeb I've been working on the PR this issue was meant to be a reference to keep track of it. You can review the PR for this at #747.

[benhalverson]

@ahmadawais you may want to also take a look at https://github.com/nodejs/nodejs.dev/issues/726 about the install tabs and buttons.

[benhalverson]

@designMoreWeb

are we still accepting PR’s to staging for now or it has been halted till we get the file structure for the code reconfigured?

Master has the latest and we should build against that now.

[designMoreWeb]

@designMoreWeb

are we still accepting PR’s to staging for now or it has been halted till we get the file structure for the code reconfigured?

Master has the latest and we should build against that now.

Okay so are not pushing to staging any more ? Maybe we can talk about this tomorrow when we speak