Skip to content

Feature request: Improve colour contrast in the tutorial pages. #587

Open
@Geerayef

Description

@Geerayef

Hello!

I'm learning Svelte and going through the tutorial on your website - which is very nice, and Svelte is really cool as well.

Anyways, I'm colorblind, not completely, but enough to make some things more difficult on occasion.
So one thing that I struggle with are the colours that denote lines of code that should be deleted (red) and added (green) during the tutorial. Most recent example is in Part 3 / Loading data / Page data:

/// file: src/routes/blog/+page.svelte
+++<script>
	export let data;
</script>+++

<h1>blog</h1>

<ul>
---	<li><a href="https://github.com/blog/one">one</a></li>
	<li><a href="https://github.com/blog/two">two</a></li>
	<li><a href="https://github.com/blog/three">three</a></li>---
+++	{#each data.summaries as { slug, title }}
		<li><a href="https://github.com/blog/%7Bslug%7D">{title}</a></li>
	{/each}+++
</ul>

It took me a solid 10-15 minutes to figure out what the deal was here and why the code in the file didn't match the code in the explanation snippets, and then upon inspecting the page here on Github I figured it out.

Anyways, this is all just to give context to the main point that I'm attempting to spit out here.
It would be lovely if the contrast between the background and the foreground colours, and amongst the foreground colours themselves, was a tad bit greater.
Perhaps making the background darker and the foreground colours more bright and vibrant could help? Of course, I wish not to take away from the colorscheme of the Svelte website, but increasing contrast might help with readability.

Either way, thank you for the awesome website and I hope that my suggestion is constructive.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions