Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Counter <button> in default template has color contrast issues #961

Closed
bamadesigner opened this issue Apr 10, 2021 · 2 comments
Closed

Comments

@bamadesigner
Copy link
Contributor

Describe the bug
The Counter in default template has color contrast issues.

The button has insufficient color contrast of 3.08 (foreground color: #ff3e00, background color: #ffece6, font size: 12.0pt (16px), font weight: normal). The expected contrast ratio is 4.5:1.

To Reproduce
Download the app and run the development environment. The button exists in the index route.

Expected behavior
The contrast between the button background color and the button text color should have a ratio of 4.5:1. Right now it is 3.08.

Severity
This is an accessibility violation and will affect some users who have low vision, color blindness, etc.

Additional context
As this is example code that users might replicate, we should make sure it is accessible for all.

Screen Shot of button with color contrast issues

This was linked to pull requests Apr 12, 2021
@alexander-mart
Copy link
Contributor

<offtop>
@bamadesigner Can you send an link to some tools or projects that detect thouse a11y issues (for buttons, for example) automatically?
</offtop>

@Rich-Harris
Copy link
Member

The demo app has been replaced, so I'll close this (but any a11y-related issues pertaining to the new app are more than welcome) — thank you

https://netlify.demo.svelte.dev/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants