-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
95 lines (95 loc) · 19.1 KB
/
index.html
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Contrast Grid - Create a color grid showing contrast ratios</title>
<meta name="description" content="Free lightweight online tool that generates a color grid showing contrast ratios for each color pairing.">
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/form.css">
<link rel="stylesheet" href="/css/table.css">
<meta property="og:image" content="https://contrastgrid.com/screenshot.webp" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Free lightweight online tool that generates a color grid showing contrast ratios for each color pairing." />
<meta name="twitter:site" content="@mikeherchel" />
<meta name="twitter:title" content="ContrastGrid - Create a color grid showing contrast ratios" />
<meta name="twitter:image:alt" content="Screenshot of contrast grid in action" />
<meta name="twitter:image" content="https://contrastgrid.com/screenshot.webp" />
<link rel="icon" type="image/svg+xml" href="/logo.svg">
</head>
<body>
<header>
<h1><a href="/"><img src="/logo.svg" width="27" height="27" alt=""> Build a Color Contrast Grid</a></h1>
<p>Enter one color per line (this can be almost any format including Hex, RGB, HSL, HSLA, etc). If you choose to not fill in the "Y axis colors" field, we will compare the X axis against itself.</p>
</header>
<main class="layout-container">
<form class="color-input-form">
<label>
<div>X axis colors (required). Hex, RGB, HSL, HSLA are all supported</div>
<small>This can also have variable names (deliniated from the color with a colon (<code>:</code>).</small>
<textarea placeholder="hsl(202, 79%, 50%) #ff0033 rebeccapurple" class="color-input-x" rows="5" required></textarea>
</label>
<button class="button-reverse" type="button" aria-label="Reverse X and Y axis data">↑↓</button>
<label>
<div>Y axis colors (optional)</div>
<textarea class="color-input-y" rows="5"></textarea>
</label>
<button class="button-submit">Build Contrast Grid</button>
</form>
<div class="table-container">
<div class="placeholder">
<h2>Directions</h2>
<p>Enter colors <span class="show-large">to the left</span><span class="show-small">above</span>. Don't have your own colors? Checkout some of our sample color grids:</p>
<ul>
<li><a href="/?xAxisData=%255B%257B%2522color%2522%253A%2522%2523000%2522%257D%252C%257B%2522color%2522%253A%2522%25230d1214%2522%257D%252C%257B%2522color%2522%253A%2522hsl%28210%252C%25208%2525%252C%25205%2525%29%2522%257D%252C%257B%2522color%2522%253A%2522%2523171e23%2522%257D%252C%257B%2522color%2522%253A%2522%2523313637%2522%257D%252C%257B%2522color%2522%253A%2522%25236e7172%2522%257D%252C%257B%2522color%2522%253A%2522%25235d7585%2522%257D%252C%257B%2522color%2522%253A%2522%25237d919d%2522%257D%252C%257B%2522color%2522%253A%2522%25237e96a7%2522%257D%252C%257B%2522color%2522%253A%2522%2523afb8be%2522%257D%252C%257B%2522color%2522%253A%2522gray%2522%257D%252C%257B%2522color%2522%253A%2522%2523d7e1e8%2522%257D%252C%257B%2522color%2522%253A%2522%2523e3e3e5%2522%257D%252C%257B%2522color%2522%253A%2522%2523e7edf1%2522%257D%252C%257B%2522color%2522%253A%2522%2523f1f4f7%2522%257D%252C%257B%2522color%2522%253A%2522%2523f7f9fa%2522%257D%255D">Gray Palette</a></li>
<li><a
href="/?xAxisData=%255B%257B%2522color%2522%253A%2522%2523FFEBEE%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFCDD2%2522%257D%252C%257B%2522color%2522%253A%2522%2523EF9A9A%2522%257D%252C%257B%2522color%2522%253A%2522%2523E57373%2522%257D%252C%257B%2522color%2522%253A%2522%2523EF5350%2522%257D%252C%257B%2522color%2522%253A%2522%2523F44336%2522%257D%252C%257B%2522color%2522%253A%2522%2523E53935%2522%257D%252C%257B%2522color%2522%253A%2522%2523D32F2F%2522%257D%252C%257B%2522color%2522%253A%2522%2523C62828%2522%257D%252C%257B%2522color%2522%253A%2522%2523B71C1C%2522%257D%252C%257B%2522color%2522%253A%2522%2523FF8A80%2522%257D%252C%257B%2522color%2522%253A%2522%2523FF5252%2522%257D%252C%257B%2522color%2522%253A%2522%2523FF1744%2522%257D%252C%257B%2522color%2522%253A%2522%2523D50000%2522%257D%252C%257B%2522color%2522%253A%2522%2523FCE4EC%2522%257D%252C%257B%2522color%2522%253A%2522%2523F8BBD0%2522%257D%252C%257B%2522color%2522%253A%2522%2523F48FB1%2522%257D%252C%257B%2522color%2522%253A%2522%2523F06292%2522%257D%252C%257B%2522color%2522%253A%2522%2523EC407A%2522%257D%252C%257B%2522color%2522%253A%2522%2523E91E63%2522%257D%252C%257B%2522color%2522%253A%2522%2523D81B60%2522%257D%252C%257B%2522color%2522%253A%2522%2523C2185B%2522%257D%252C%257B%2522color%2522%253A%2522%2523AD1457%2522%257D%252C%257B%2522color%2522%253A%2522%2523880E4F%2522%257D%252C%257B%2522color%2522%253A%2522%2523FF80AB%2522%257D%252C%257B%2522color%2522%253A%2522%2523FF4081%2522%257D%252C%257B%2522color%2522%253A%2522%2523F50057%2522%257D%252C%257B%2522color%2522%253A%2522%2523C51162%2522%257D%252C%257B%2522color%2522%253A%2522%2523F3E5F5%2522%257D%252C%257B%2522color%2522%253A%2522%2523E1BEE7%2522%257D%252C%257B%2522color%2522%253A%2522%2523CE93D8%2522%257D%252C%257B%2522color%2522%253A%2522%2523BA68C8%2522%257D%252C%257B%2522color%2522%253A%2522%2523AB47BC%2522%257D%252C%257B%2522color%2522%253A%2522%25239C27B0%2522%257D%252C%257B%2522color%2522%253A%2522%25238E24AA%2522%257D%252C%257B%2522color%2522%253A%2522%25237B1FA2%2522%257D%252C%257B%2522color%2522%253A%2522%25236A1B9A%2522%257D%252C%257B%2522color%2522%253A%2522%25234A148C%2522%257D%252C%257B%2522color%2522%253A%2522%2523EA80FC%2522%257D%252C%257B%2522color%2522%253A%2522%2523E040FB%2522%257D%252C%257B%2522color%2522%253A%2522%2523D500F9%2522%257D%252C%257B%2522color%2522%253A%2522%2523AA00FF%2522%257D%252C%257B%2522color%2522%253A%2522%2523EDE7F6%2522%257D%252C%257B%2522color%2522%253A%2522%2523D1C4E9%2522%257D%252C%257B%2522color%2522%253A%2522%2523B39DDB%2522%257D%252C%257B%2522color%2522%253A%2522%25239575CD%2522%257D%252C%257B%2522color%2522%253A%2522%25237E57C2%2522%257D%252C%257B%2522color%2522%253A%2522%2523673AB7%2522%257D%252C%257B%2522color%2522%253A%2522%25235E35B1%2522%257D%252C%257B%2522color%2522%253A%2522%2523512DA8%2522%257D%252C%257B%2522color%2522%253A%2522%25234527A0%2522%257D%252C%257B%2522color%2522%253A%2522%2523311B92%2522%257D%252C%257B%2522color%2522%253A%2522%2523B388FF%2522%257D%252C%257B%2522color%2522%253A%2522%25237C4DFF%2522%257D%252C%257B%2522color%2522%253A%2522%2523651FFF%2522%257D%252C%257B%2522color%2522%253A%2522%25236200EA%2522%257D%252C%257B%2522color%2522%253A%2522%2523E8EAF6%2522%257D%252C%257B%2522color%2522%253A%2522%2523C5CAE9%2522%257D%252C%257B%2522color%2522%253A%2522%25239FA8DA%2522%257D%252C%257B%2522color%2522%253A%2522%25237986CB%2522%257D%252C%257B%2522color%2522%253A%2522%25235C6BC0%2522%257D%252C%257B%2522color%2522%253A%2522%25233F51B5%2522%257D%252C%257B%2522color%2522%253A%2522%25233949AB%2522%257D%252C%257B%2522color%2522%253A%2522%2523303F9F%2522%257D%252C%257B%2522color%2522%253A%2522%2523283593%2522%257D%252C%257B%2522color%2522%253A%2522%25231A237E%2522%257D%252C%257B%2522color%2522%253A%2522%25238C9EFF%2522%257D%252C%257B%2522color%2522%253A%2522%2523536DFE%2522%257D%252C%257B%2522color%2522%253A%2522%25233D5AFE%2522%257D%252C%257B%2522color%2522%253A%2522%2523304FFE%2522%257D%252C%257B%2522color%2522%253A%2522%2523E3F2FD%2522%257D%252C%257B%2522color%2522%253A%2522%2523BBDEFB%2522%257D%252C%257B%2522color%2522%253A%2522%252390CAF9%2522%257D%252C%257B%2522color%2522%253A%2522%252364B5F6%2522%257D%252C%257B%2522color%2522%253A%2522%252342A5F5%2522%257D%252C%257B%2522color%2522%253A%2522%25232196F3%2522%257D%252C%257B%2522color%2522%253A%2522%25231E88E5%2522%257D%252C%257B%2522color%2522%253A%2522%25231976D2%2522%257D%252C%257B%2522color%2522%253A%2522%25231565C0%2522%257D%252C%257B%2522color%2522%253A%2522%25230D47A1%2522%257D%252C%257B%2522color%2522%253A%2522%252382B1FF%2522%257D%252C%257B%2522color%2522%253A%2522%2523448AFF%2522%257D%252C%257B%2522color%2522%253A%2522%25232979FF%2522%257D%252C%257B%2522color%2522%253A%2522%25232962FF%2522%257D%252C%257B%2522color%2522%253A%2522%2523E1F5FE%2522%257D%252C%257B%2522color%2522%253A%2522%2523B3E5FC%2522%257D%252C%257B%2522color%2522%253A%2522%252381D4FA%2522%257D%252C%257B%2522color%2522%253A%2522%25234FC3F7%2522%257D%252C%257B%2522color%2522%253A%2522%252329B6F6%2522%257D%252C%257B%2522color%2522%253A%2522%252303A9F4%2522%257D%252C%257B%2522color%2522%253A%2522%2523039BE5%2522%257D%252C%257B%2522color%2522%253A%2522%25230288D1%2522%257D%252C%257B%2522color%2522%253A%2522%25230277BD%2522%257D%252C%257B%2522color%2522%253A%2522%252301579B%2522%257D%252C%257B%2522color%2522%253A%2522%252380D8FF%2522%257D%252C%257B%2522color%2522%253A%2522%252340C4FF%2522%257D%252C%257B%2522color%2522%253A%2522%252300B0FF%2522%257D%252C%257B%2522color%2522%253A%2522%25230091EA%2522%257D%252C%257B%2522color%2522%253A%2522%2523E0F7FA%2522%257D%252C%257B%2522color%2522%253A%2522%2523B2EBF2%2522%257D%252C%257B%2522color%2522%253A%2522%252380DEEA%2522%257D%252C%257B%2522color%2522%253A%2522%25234DD0E1%2522%257D%252C%257B%2522color%2522%253A%2522%252326C6DA%2522%257D%252C%257B%2522color%2522%253A%2522%252300BCD4%2522%257D%252C%257B%2522color%2522%253A%2522%252300ACC1%2522%257D%252C%257B%2522color%2522%253A%2522%25230097A7%2522%257D%252C%257B%2522color%2522%253A%2522%252300838F%2522%257D%252C%257B%2522color%2522%253A%2522%2523006064%2522%257D%252C%257B%2522color%2522%253A%2522%252384FFFF%2522%257D%252C%257B%2522color%2522%253A%2522%252318FFFF%2522%257D%252C%257B%2522color%2522%253A%2522%252300E5FF%2522%257D%252C%257B%2522color%2522%253A%2522%252300B8D4%2522%257D%252C%257B%2522color%2522%253A%2522%2523E0F2F1%2522%257D%252C%257B%2522color%2522%253A%2522%2523B2DFDB%2522%257D%252C%257B%2522color%2522%253A%2522%252380CBC4%2522%257D%252C%257B%2522color%2522%253A%2522%25234DB6AC%2522%257D%252C%257B%2522color%2522%253A%2522%252326A69A%2522%257D%252C%257B%2522color%2522%253A%2522%2523009688%2522%257D%252C%257B%2522color%2522%253A%2522%252300897B%2522%257D%252C%257B%2522color%2522%253A%2522%252300796B%2522%257D%252C%257B%2522color%2522%253A%2522%252300695C%2522%257D%252C%257B%2522color%2522%253A%2522%2523004D40%2522%257D%252C%257B%2522color%2522%253A%2522%2523A7FFEB%2522%257D%252C%257B%2522color%2522%253A%2522%252364FFDA%2522%257D%252C%257B%2522color%2522%253A%2522%25231DE9B6%2522%257D%252C%257B%2522color%2522%253A%2522%252300BFA5%2522%257D%252C%257B%2522color%2522%253A%2522%2523E8F5E9%2522%257D%252C%257B%2522color%2522%253A%2522%2523C8E6C9%2522%257D%252C%257B%2522color%2522%253A%2522%2523A5D6A7%2522%257D%252C%257B%2522color%2522%253A%2522%252381C784%2522%257D%252C%257B%2522color%2522%253A%2522%252366BB6A%2522%257D%252C%257B%2522color%2522%253A%2522%25234CAF50%2522%257D%252C%257B%2522color%2522%253A%2522%252343A047%2522%257D%252C%257B%2522color%2522%253A%2522%2523388E3C%2522%257D%252C%257B%2522color%2522%253A%2522%25232E7D32%2522%257D%252C%257B%2522color%2522%253A%2522%25231B5E20%2522%257D%252C%257B%2522color%2522%253A%2522%2523B9F6CA%2522%257D%252C%257B%2522color%2522%253A%2522%252369F0AE%2522%257D%252C%257B%2522color%2522%253A%2522%252300E676%2522%257D%252C%257B%2522color%2522%253A%2522%252300C853%2522%257D%252C%257B%2522color%2522%253A%2522%2523F1F8E9%2522%257D%252C%257B%2522color%2522%253A%2522%2523DCEDC8%2522%257D%252C%257B%2522color%2522%253A%2522%2523C5E1A5%2522%257D%252C%257B%2522color%2522%253A%2522%2523AED581%2522%257D%252C%257B%2522color%2522%253A%2522%25239CCC65%2522%257D%252C%257B%2522color%2522%253A%2522%25238BC34A%2522%257D%252C%257B%2522color%2522%253A%2522%25237CB342%2522%257D%252C%257B%2522color%2522%253A%2522%2523689F38%2522%257D%252C%257B%2522color%2522%253A%2522%2523558B2F%2522%257D%252C%257B%2522color%2522%253A%2522%252333691E%2522%257D%252C%257B%2522color%2522%253A%2522%2523CCFF90%2522%257D%252C%257B%2522color%2522%253A%2522%2523B2FF59%2522%257D%252C%257B%2522color%2522%253A%2522%252376FF03%2522%257D%252C%257B%2522color%2522%253A%2522%252364DD17%2522%257D%252C%257B%2522color%2522%253A%2522%2523F9FBE7%2522%257D%252C%257B%2522color%2522%253A%2522%2523F0F4C3%2522%257D%252C%257B%2522color%2522%253A%2522%2523E6EE9C%2522%257D%252C%257B%2522color%2522%253A%2522%2523DCE775%2522%257D%252C%257B%2522color%2522%253A%2522%2523D4E157%2522%257D%252C%257B%2522color%2522%253A%2522%2523CDDC39%2522%257D%252C%257B%2522color%2522%253A%2522%2523C0CA33%2522%257D%252C%257B%2522color%2522%253A%2522%2523AFB42B%2522%257D%252C%257B%2522color%2522%253A%2522%25239E9D24%2522%257D%252C%257B%2522color%2522%253A%2522%2523827717%2522%257D%252C%257B%2522color%2522%253A%2522%2523F4FF81%2522%257D%252C%257B%2522color%2522%253A%2522%2523EEFF41%2522%257D%252C%257B%2522color%2522%253A%2522%2523C6FF00%2522%257D%252C%257B%2522color%2522%253A%2522%2523AEEA00%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFFDE7%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFF9C4%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFF59D%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFF176%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFEE58%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFEB3B%2522%257D%252C%257B%2522color%2522%253A%2522%2523FDD835%2522%257D%252C%257B%2522color%2522%253A%2522%2523FBC02D%2522%257D%252C%257B%2522color%2522%253A%2522%2523F9A825%2522%257D%252C%257B%2522color%2522%253A%2522%2523F57F17%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFFF8D%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFFF00%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFEA00%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFD600%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFF8E1%2522%257D%255D&yAxisData=%255B%257B%2522color%2522%253A%2522%2523EFEBE9%2522%257D%252C%257B%2522color%2522%253A%2522%2523D7CCC8%2522%257D%252C%257B%2522color%2522%253A%2522%2523BCAAA4%2522%257D%252C%257B%2522color%2522%253A%2522%2523A1887F%2522%257D%252C%257B%2522color%2522%253A%2522%25238D6E63%2522%257D%252C%257B%2522color%2522%253A%2522%2523795548%2522%257D%252C%257B%2522color%2522%253A%2522%25236D4C41%2522%257D%252C%257B%2522color%2522%253A%2522%25235D4037%2522%257D%252C%257B%2522color%2522%253A%2522%25234E342E%2522%257D%252C%257B%2522color%2522%253A%2522%25233E2723%2522%257D%252C%257B%2522color%2522%253A%2522%2523FAFAFA%2522%257D%252C%257B%2522color%2522%253A%2522%2523F5F5F5%2522%257D%252C%257B%2522color%2522%253A%2522%2523EEEEEE%2522%257D%252C%257B%2522color%2522%253A%2522%2523E0E0E0%2522%257D%252C%257B%2522color%2522%253A%2522%2523BDBDBD%2522%257D%252C%257B%2522color%2522%253A%2522%25239E9E9E%2522%257D%252C%257B%2522color%2522%253A%2522%2523757575%2522%257D%252C%257B%2522color%2522%253A%2522%2523616161%2522%257D%252C%257B%2522color%2522%253A%2522%2523424242%2522%257D%252C%257B%2522color%2522%253A%2522%2523212121%2522%257D%252C%257B%2522color%2522%253A%2522%2523ECEFF1%2522%257D%252C%257B%2522color%2522%253A%2522%2523CFD8DC%2522%257D%252C%257B%2522color%2522%253A%2522%2523B0BEC5%2522%257D%252C%257B%2522color%2522%253A%2522%252390A4AE%2522%257D%252C%257B%2522color%2522%253A%2522%252378909C%2522%257D%252C%257B%2522color%2522%253A%2522%2523607D8B%2522%257D%252C%257B%2522color%2522%253A%2522%2523546E7A%2522%257D%252C%257B%2522color%2522%253A%2522%2523455A64%2522%257D%252C%257B%2522color%2522%253A%2522%252337474F%2522%257D%252C%257B%2522color%2522%253A%2522%2523263238%2522%257D%252C%257B%2522color%2522%253A%2522%2523FFFFFF%2522%257D%252C%257B%2522color%2522%253A%2522%2523000000%2522%257D%255D">
Large color palette from MaterialUI</a></li>
<li>
<a href="/?xAxisData=%255B%257B%2522name%2522%253A%2522--teen-party--primary%2522%252C%2522color%2522%253A%2522%2523cc208e%2522%257D%252C%257B%2522name%2522%253A%2522--teen-party--secondary%2522%252C%2522color%2522%253A%2522%25236713d2%2522%257D%252C%257B%2522name%2522%253A%2522--cotton-candy--primary%2522%252C%2522color%2522%253A%2522%252300dbde%2522%257D%252C%257B%2522name%2522%253A%2522--cotton-candy--secondary%2522%252C%2522color%2522%253A%2522%2523fc00ff%2522%257D%252C%257B%2522name%2522%253A%2522--sunset--primary%2522%252C%2522color%2522%253A%2522%2523231557%2522%257D%252C%257B%2522name%2522%253A%2522--sunset--secondary%2522%252C%2522color%2522%253A%2522%252344107A%2522%257D%252C%257B%2522name%2522%253A%2522--sunset--tertiary%2522%252C%2522color%2522%253A%2522%2523FF1361%2522%257D%252C%257B%2522name%2522%253A%2522--sunset--quaternary%2522%252C%2522color%2522%253A%2522%2523FFF800%2522%257D%255D&yAxisData=%255B%257B%2522name%2522%253A%2522--mist--primary%2522%252C%2522color%2522%253A%2522%25233d3393%2522%257D%252C%257B%2522name%2522%253A%2522--mist--secondary%2522%252C%2522color%2522%253A%2522%25232b76b9%2522%257D%252C%257B%2522name%2522%253A%2522--mist--tertiary%2522%252C%2522color%2522%253A%2522%25232cacd1%2522%257D%252C%257B%2522name%2522%253A%2522--mist--quaternary%2522%252C%2522color%2522%253A%2522%252335eb93%2522%257D%255D">
Color pallete with variable names
</a>
</li>
</ul>
<h2>Features</h2>
<ol>
<li>Support for Hex, RGB, HSL, HSLA, etc</li>
<li>Support color names (and having the name output within the table). Separate the name from the color with a colon (<code>:</code>).</li>
<li><p>Easy copy/pasting of CSS with variable names (even with comments afterwards). The following code will parse perfectly:</p>
<div class="overflow">
<pre>
<code>--teen-party--primary: #cc208e; /* accessibile on white, not on dark */
--teen-party--secondary: #6713d2; /* accessibile on white, not on dark */
--cotton-candy--primary: #00dbde; /* not accessibile on white. Accessible on dark */
--cotton-candy--secondary: #fc00ff; /* not accessibile on white. 3.19:1 on dark */
</code></pre></div></li>
<li>Easy copying and pasting from Sass maps into the form. The following will work perfectly (the invalid lines will be discarded):
<div class="overflow">
<pre>
<code>$palette: (
blue-40: #185d87,
blue-45: #0068a8,
blue-50: #177ab6,
blue-55: #2284c0,
blue-60: #37a9ef,
blue-70: #89d2ff,
blue-90: #cdebf9,
);
</code></pre></div> </li>
<li>Sticky table headings and hover "crosshairs" make it easy to see which colors you're looking at when there is a very large table of colors.</li>
<li>Super nifty "flip axis data" button (↑↓) that will flip the values in the X and Y coordinates.</li>
<li>Saves the color grid to the URL, so you can share with your coworkers.</li>
<li>You can use your browser's back/forward buttons to navigate back and forth when you make changes.</li>
<li>Super lightweight. Written in vanilla HTML/CSS/JS, and without any tracking/analytics scripts.</li>
</ol>
</div>
</div>
</main>
<footer>
<p>The code for this website is available at <a href="https://github.com/mherchel/contrast-grid">https://github.com/mherchel/contrast-grid</a>.</p>
<p>The concept of this site is inspired by <a href="https://contrast-grid.eightshapes.com/">Eightshapes' Contrast Grid </a>, as well as <a href="https://metageeky.github.io/contrast_table_analyzer/contrast-table.html">Kate Deibel's Contrast Table Analyzer</a>.</p>
</footer>
<script src="/js/tinycolor-min.js"></script>
<script src="/js/scripts.js"></script>
</body>
</html>