melink14/rikaikun

Review color contrast options in rikaikun

Opened this issue ยท 8 comments

"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.

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

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.

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/

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

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.

@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! ๐ŸŽ‰

(made general theming issue here: #1310)

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