Enhance default color contrast of the icons

Use case or problem

I’m trying to use Obsidian with some glare on my screen during daytime. This makes it quite hard to make out the icons on the left side (search, files, back, forward, collapse and all the icons along the left strip).
I tried checking the contrast of these icons and got some poor results according to the WCAG:
Screen Shot 2021-08-23 at 11.27.37
The current ratio is 3.65:1, while the WCAG “requires” a minimum of 4.5:1. I used a color picker on a screenshot, so my value of #666666 might be inaccurate.

Proposed solution

Make the color of the icons lighter when they are not selected. #757575 would meet the minimum requirements, #959595 would meet the enhanced requirements. Of course it’s not as easy as changing this one color, as all the visual hierarchy will change with this. But having your minimum contrast level be perceivable is a good baseline, and then you can have higher and higher contrast from there.

Current workaround (optional)

You could create your own accessible CSS theme.

3 Likes

Yes. I don’t know why almost everyone today goes for these “gray in lightgray” themes. It’s so hard for my poor eyes. Especially, as you mention, with glare screens.

1 Like

I also agree. This “gray on lightgray” thing is why Reeder is unusable for me, for example.

at least for some of the things, I found some CSS you can use to fix it

.nav-action-button svg,
.workspace-tab-header-inner-icon svg {
	stroke-width: 2px;
	color: #555;
}
.nav-file-title, .nav-folder-title{
	color: #555;
}
3 Likes

Maybe, I should create an Accessibile theme with a light / dark mode…

1 Like

So, I actually did create sort of an accessibility theme which also increases contrast :slight_smile:

I just submitted it to the Community Theme Browser: Shimmering Focus

Was contrast the only modification?

No, I added other things to basically increase readability (e.g. tinted bold in dark mode), and a bunch of more “functional” stuff like hiding a lot of clutter, adding relationship lines etc.

You can read here what the theme does.

Thanks, I will check it out.

Hmmm, brings up a third mode idea… Dark Mode, Light Mode, and “Dawn Mode”.

I’m assuming people like dark mode on a phone as it saves power over hours of use. So you want something inbetween. Not too dark, not too light.

I called it Dawn Mode because that sounds more optimistic than Dusk Mode.