[Website] Colour contrast of the cheat sheet and changelog pages is very inaccessible

[kazerniel]

🗹 Requirements

• [x] I have searched the issues for my issue and found nothing related and/or helpful
• [x] I have searched the FAQ for help
• [x] I have searched the Wiki for help

🎯 Subject of the issue

Experienced behavior: The eye-watering colour contrast of these pages significantly harms my (and probably others') user experience. And I don't even have any vision impairments; users with such conditions are probably even more hindered.

Expected behavior: For the colour contrasts to be easy on the eyes of users. The probably least subjective way to achieve this would be to comply with APCA (or at least WCAG AA) standards.

Cheat sheet page: https://www.myndex.com/APCA/?BG=75715e&TXT=0fbfcf&DEV=G4g&BUF=A22

• Currently APCA Lc -30.2.
• The minimum would be Lc -60 for the text and Lc -45 for the icons.

Changelog page: https://www.myndex.com/APCA/?BG=ff8b25&TXT=ffffff&DEV=G4g&BUF=A22

• Currently APCA Lc -50.5.
• It would need at least APCA Lc -60 for the text to be easily legible at that size.

See the "APCA Guidelines: Bronze Level" dropdown on that comparison website for explanations of the contrast levels appropriate based on usage.

Example symbols:

🔧 Your Setup

• Which font are you using (e.g. Anonymice Powerline Nerd Font Complete.ttf)?
  • —
• Where did you get the file from (download link, self patched, source downloaded from link...)
  • —
• Which terminal emulator are you using (e.g. iterm2, urxvt, gnome, konsole)?
  • —
• Are you using OS X, Linux or Windows? And which specific version or distribution?
  • —

★ Screenshots (Optional)

-

[Finii]

Thanks for the report and the excellent research/links.

The colors / design etc has been done aeons ago and never touched since.

Lets examine all pages. The background is dithered, I used the worse color (I hope).

page	fg	bg	contrast	usage	comment
main	171717	ffffff	105	Small body text only
features	000000	a5d2d9	76	Body text okay
download	ffffff	24678d	-86	Body text okay
cheatsheet	4bbdd0	766d5e	-32	Spot and non text only	interestingly slightly different color than you reported
cheatsheet	4bbdd0	958f82	-16	No text usage	This is the 'highlighted' text :vomiting_face:
contrib	f8f8f8	d15941	-68	Fluent text okay
backers	f8f8f8	ad73b2	-64	Fluent text okay
change	f8f8f8	f38f27	-47	Large and sub-fluent text

WAT?

To determine the colors I used a screenshot and Gimp's eyedropper, but:

The reddish color in the background differs original to screenshot/gimp? At least to my eyes it looks a bit more orange-ish in Gimp.

... ah this is color management turned on in Gimp :relieved: Turning it off makes it show identical.

[Finii]

Possible alternatives:

Changelog: 000000 / ffa74e (67, Fluent text okay) Cheatsheet: 69e8ff / 696053 (-61, Fluent text okay)

Lets see if I can implement that change.

[Finii]

Looks probably better, except the 'removed' icon color

[Finii]

Much better!!! Thank you for triggering this.

[Finii]

@allcontributors please add @kazerniel for ally

[allcontributors[bot]]

@Finii

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

[Finii]

@allcontributors please add @kazerniel for Accessibility

[allcontributors[bot]]

@Finii

I've put up a pull request to add @kazerniel! :tada:

[kazerniel]

Thanks @Finii :)