thebetter000/index.html at main · velthy/thebetter000 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

	<title>The Better #000000</title>
	<meta name="description" content="This website offers a variety of dark shades as alternatives to pure black.">

	<link rel="stylesheet" type="text/css" href="assets/css/fonts.css?20241025">
	<link rel="stylesheet" type="text/css" href="assets/css/styles.css?20250327">

	<link rel="icon" href="assets/img/favicon.png">
	<meta property="og:image" content="/assets/img/poster.png">
</head>
<body>

	<header class="site-header">
		<h1>The Better #000000</h1>
		<button class="toggle-site-panel">About</button>
	</header>

	<section class="site-content">
		<div class="color-grid">
		</div>
	</section>

	<nav class="site-filter">
		<ul>
			<li>
				<input type="checkbox" id="filter-color-green">
				<label for="filter-color-green">Green</label>
			</li>
			<li>
				<input type="checkbox" id="filter-color-blue">
				<label for="filter-color-blue">Blue</label>
			</li>
			<li>
				<input type="checkbox" id="filter-color-purple">
				<label for="filter-color-purple">Purple</label>
			</li>
			<li>
				<input type="checkbox" id="filter-color-red">
				<label for="filter-color-red">Red</label>
			</li>
			<li>
				<input type="checkbox" id="filter-color-brown">
				<label for="filter-color-brown">Brown</label>
			</li>
			<li>
				<input type="checkbox" id="filter-color-grey">
				<label for="filter-color-grey">Grey</label>
			</li>
		</ul>
	</nav>

	<footer class="site-footer">
		<div class="site-footer__content">
			<h2>What's this?</h2>
			<p>Using pure black (<code>#000000</code>) as a background color can sometimes be problematic, particularly when paired with pure white (<code>#ffffff</code>) for text. While this high contrast <strong>may</strong> seem ideal for readability, it can actually cause <strong>visual strain for some users</strong>. The stark difference between the two extremes of the color spectrum can make text appear harsh, leading to discomfort during prolonged reading.</p>
			<p>That’s why this website offers a <strong>variety of dark shades</strong> as alternatives to pure black. These subtle variations still provide the richness of a dark background, but with a softer contrast that is easier on the eyes when paired with lighter text. Of course, using <code>#000000</code> is <strong>perfectly acceptable in many design scenarios</strong>. However, if you do opt for pure black, it’s important to avoid pairing it with pure white text. Instead, consider off-white shades or light greys, which reduce the intensity of the contrast without sacrificing readability.</p>
			<p>By choosing carefully balanced color combinations, you can create a design that is both <strong>visually appealing and comfortable for users</strong>.</p>
		</div>
		<div class="site-footer__copyright">
			<p>Built by <a href="https://velthy.net">Stefan Velthuys</a> in 2024.<br>With help from ChatGPT for JavaScript and the extensive, generated list of colors (hues and instructions were provided). The inspiration came from the article <a href="https://uxplanet.org/alternatives-to-using-pure-black-000000-for-text-and-backgrounds-54ef0e733cdb">«Alternatives to Using Pure Black (#000000) for Text and Backgrounds»</a> by <a href="https://www.dmitrysergushkin.com/">Dmitry Sergushkin</a>.</p>
		</div>
	</footer>
	<script src="assets/js/main.js?20250327"></script>
	<script src="https://required.com/content/plugins/iframe-resizer-for-html-block/assets/dist/iframe-resizer-child.js?ver=0c7b7e5d83be067dc884" async></script>
</body>
</html>