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

Review color contrast options in rikaikun #594

Open
melink14 opened this issue Jul 11, 2021 · 8 comments
Open

Review color contrast options in rikaikun #594

melink14 opened this issue Jul 11, 2021 · 8 comments

Comments

@melink14
Copy link
Owner

"Absolutely amazing tool that made my life many times easier. However I think a font colour option would be helpful since the contrast is not ideal."

Maybe can offer some CSS customization options as well.

@aaronpc33
Copy link

I agree with melink - very useful and educational. However, recently the text has changed to an unreadable color. How can I fix this?
Screen Shot 2021-08-26 at 8 29 33

@melink14
Copy link
Owner Author

Does it happen on every site or just that one?

What if you change to yellow or light blue themes in options?

Usually if this happens it means the site's css is overriding rikaikun's. That shouldn't happen with properly coded sites but I do have an issue to protect rikaikun styles more with #221

Another cause could be custom css applied via another extension but that's probably rarer.

@aaronpc33
Copy link

I think must be just that site. When I change the background color to black, I can read it.

https://www3.nhk.or.jp/news/easy/

@dalyn-lambert
Copy link

Hello!
I put together a Usability Report that analyzes the accessibility of the extension for users with color blindness. I hope this can be of use to you if you decide to revisit the color scheme options.
Rikaikun Usability Report.pdf

@melink14
Copy link
Owner Author

melink14 commented Dec 5, 2022

Wow @Dalyn-Boyd. That seems really useful.

Question:
What tool did you use to simulate the different kinds of color blindness? I'm familiar with color contrast ratios but couldn't quickly see which tool did the transformation before running the analysis. (Only looked through the linked refs a bit though)

My thoughts after reading this:

  • Adjust all the color schemes so that they pass a11y checks for non color blind users. I've used a tool before which fines closest passing color, so hopefully this will be doable without much creative change.
  • Adjust either black or yellow so it works for total and blue/yellow color blindness (or perhaps both)

With the switch to lit templates it wouldn't be too hard to allow all theme colors to be customized but that should be handled separately.

@all-contributors please add @Dalyn-Boyd for accessibility.

@allcontributors
Copy link
Contributor

@melink14

I've put up a pull request to add @Checks! 🎉

I couldn't determine any contributions to add, did you specify any contributions?
Please make sure to use valid contribution names.

I've put up a pull request to add @Dalyn-Boyd! 🎉

mergify bot pushed a commit that referenced this issue Dec 5, 2022
Adds @Dalyn-Boyd as a contributor for a11y.

This was requested by melink14 [in this comment](#594 (comment))
@melink14
Copy link
Owner Author

melink14 commented Dec 5, 2022

(made general theming issue here: #1310)

@dalyn-lambert
Copy link

dalyn-lambert commented Dec 5, 2022

I used the Siteimprove Accessibility Checker extension to apply the filters. After installing the extension you can find the filters under the "Explore" tab.
image

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

No branches or pull requests

3 participants