https://vscodium.com/ code snipets are poorly readable (pale text on pale bacgkround) #30

Closed
opened 2025-09-10 22:49:57 -05:00 by giteasync · 5 comments
Owner

Originally created by @matkoniecz on GitHub.

Describe the bug
https://vscodium.com/ code snipets are poorly readable (pale text on pale bacgkround)

Please confirm that this problem is VSCodium-specific
It is about VSCodium website and "this site is open source" in footer linked to this repo

Please confirm that the issue/resolution isn't already documented

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://vscodium.com/
  2. try to read code there

Expected behavior
All text on website is readable

Screenshots
screen01

Desktop (please complete the following information):

  • OS: Lubuntu 20.04
  • Architecture x64
  • Version - not sure how to check deployed version of website

Additional context
If "make all text in code snippets 100% black, potentially also make backgrounds closer to white" or "make background 100% black, make all text white" would be accepted and it is fixable by editing CSS file (without some extreme nodejs hell) then I can make a PR.

Originally created by @matkoniecz on GitHub. **Describe the bug** https://vscodium.com/ code snipets are poorly readable (pale text on pale bacgkround) **Please confirm that this problem is VSCodium-specific** It is about VSCodium website and "this site is open source" in footer linked to this repo **Please confirm that the issue/resolution isn't already documented** - [x] I checked [the Docs page](https://github.com/VSCodium/vscodium/blob/master/DOCS.md) and my issue is not mentioned there. **To Reproduce** Steps to reproduce the behavior: 1. Go to https://vscodium.com/ 2. try to read code there **Expected behavior** All text on website is readable **Screenshots** ![screen01](https://user-images.githubusercontent.com/899988/93661526-b4773a00-fa58-11ea-9aa4-de6910075a4b.png) **Desktop (please complete the following information):** - OS: Lubuntu 20.04 - Architecture x64 - Version - not sure how to check deployed version of website **Additional context** If "make all text in code snippets 100% black, potentially also make backgrounds closer to white" or "make background 100% black, make all text white" would be accepted and it is fixable by editing CSS file (without some extreme nodejs hell) then I can make a PR.
Author
Owner

@stripedpajamas commented on GitHub:

I merged #25 -- what do you think of it @matkoniecz ?

https://vscodium.com/

@stripedpajamas commented on GitHub: I merged #25 -- what do you think of it @matkoniecz ? https://vscodium.com/
Author
Owner

@matkoniecz commented on GitHub:

@chadlavi It may be worth reporting as a new issue, this will be closed once this specific visibility issue is fixed.

@matkoniecz commented on GitHub: @chadlavi It may be worth reporting as a new issue, this will be closed once this specific visibility issue is fixed.
Author
Owner

@chadlavi commented on GitHub:

open source projects always struggle with accessibility, because they're often developer-led, small-scale/community efforts. It looks like the vscodium site has a lot of the common pitfalls.

  • Text like those code snippets does not conform to WCAG AA guidelines for contrast. The block quotes on the page aren't a sufficient contrast either,
  • those images also need alt attributes
  • You seem to have set outline: 0 for focused links. That breaks accessibility if you don't create some other visual identifier for the focused state of links. Links need a visible focus state

If you aren't used to designing for accessibility, just try navigating the page with your keyboard only. You'll find a lot of low-hanging fruit that way. You can also use the Chrome dev tools "Lighthouse" auditor to check for accessibility problems.

@chadlavi commented on GitHub: open source projects always struggle with accessibility, because they're often developer-led, small-scale/community efforts. It looks like the vscodium site has a lot of the common pitfalls. * Text like those code snippets does not conform to [WCAG AA guidelines for contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). The block quotes on the page aren't a sufficient contrast either, * those images also need `alt` attributes * You seem to have set `outline: 0` for focused links. That breaks accessibility if you don't create some other visual identifier for the focused state of links. Links need a visible focus state If you aren't used to designing for accessibility, just try navigating the page with your keyboard only. You'll find a lot of low-hanging fruit that way. You can also use the Chrome dev tools "Lighthouse" auditor to check for accessibility problems.
Author
Owner

@stripedpajamas commented on GitHub:

It's not useful... I'd like to get the dark red out of there.

@stripedpajamas commented on GitHub: It's not useful... I'd like to get the dark red out of there.
Author
Owner

@matkoniecz commented on GitHub:

Thanks, it is much better!

But is it useful or necessary to have this dark red color? On dark background it becomes poorly readable in turn and I see no benefit in readability from styling some parameters and && differently.

At the same time this part of the text styled red becomes the most noticeable (I notice this letter group and later rest of the text) and less readable.

And if && and long style parameters (note in Arch Linux section that short style parameters are not getting such styling) should be styled specially maybe something less distinct from rest of the text and more distinct from the bacgkround would be better?

screen02

@matkoniecz commented on GitHub: Thanks, it is much better! But is it useful or necessary to have this dark red color? On dark background it becomes poorly readable in turn and I see no benefit in readability from styling some parameters and `&&` differently. At the same time this part of the text styled red becomes the most noticeable (I notice this letter group and later rest of the text) and less readable. And if `&&` and long style parameters (note in Arch Linux section that short style parameters are not getting such styling) should be styled specially maybe something less distinct from rest of the text and more distinct from the bacgkround would be better? ![screen02](https://user-images.githubusercontent.com/899988/93846190-ab2ddd80-fca3-11ea-97bd-54e770361847.png)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: VSCodium/vscodium.github.io#30