Skip to content

Commit 08fbd79

Browse files
firestar300firestar300
committed
fix(a11y): color contrast ratio
1 parent 7b39960 commit 08fbd79

4 files changed

Lines changed: 38 additions & 18 deletions

File tree

‎index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
</script>
125125
<meta name="google-site-verification" content="f-IZyEhpwN5qV3JabnOWGKJR-ed2_K2KxCrpGs5Jono" />
126126
</head>
127-
<body class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors">
127+
<body class="bg-slate-50 dark:bg-slate-900 text-slate-950 dark:text-slate-100 transition-colors">
128128
<div class="max-w-7xl mx-auto p-8">
129129
<!-- Header -->
130130
<header class="text-center mb-12">
@@ -138,10 +138,10 @@
138138
</svg>
139139
</button>
140140
</div>
141-
<svg class="w-14 h-14 mx-auto my-4 fill-primary dark:fill-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" fill="none" aria-hidden="true" focusable="false">
141+
<svg class="w-14 h-14 mx-auto my-4 fill-primary dark:fill-indigo-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" fill="none" aria-hidden="true" focusable="false">
142142
<path d="M27.5 50.417c-6.34 0-11.745-2.235-16.213-6.703-4.47-4.469-6.704-9.874-6.704-16.214 0-6.416 2.235-11.84 6.704-16.27C15.755 6.798 21.16 4.582 27.5 4.582c6.417 0 11.84 2.216 16.271 6.646 4.43 4.43 6.646 9.855 6.646 16.271 0 6.34-2.215 11.745-6.646 16.214-4.43 4.468-9.854 6.703-16.27 6.703Zm0-9.167c3.896 0 7.162-1.337 9.797-4.01 2.636-2.674 3.953-5.92 3.953-9.74 0-3.896-1.318-7.161-3.953-9.797-2.635-2.635-5.901-3.953-9.797-3.953-3.82 0-7.066 1.318-9.74 3.953-2.673 2.636-4.01 5.901-4.01 9.797 0 3.82 1.337 7.066 4.01 9.74 2.674 2.673 5.92 4.01 9.74 4.01Zm45.834 64.167c-2.521 0-4.68-.898-6.475-2.693s-2.692-3.953-2.692-6.474V73.334c0-2.521.897-4.68 2.692-6.475 1.796-1.795 3.954-2.692 6.475-2.692H96.25c2.521 0 4.679.897 6.474 2.692 1.795 1.796 2.693 3.954 2.693 6.475V96.25c0 2.521-.898 4.679-2.693 6.474s-3.953 2.693-6.474 2.693H73.334Zm0-9.167H96.25V73.334H73.334V96.25Zm7.906-60.958L35.292 81.125c.382.917.706 1.872.974 2.865.267.993.4 2.024.4 3.094 0 3.819-1.317 7.066-3.952 9.74-2.636 2.673-5.901 4.009-9.797 4.009-3.82 0-7.066-1.336-9.74-4.01-2.673-2.673-4.01-5.92-4.01-9.74 0-3.895 1.337-7.161 4.01-9.796 2.674-2.636 5.92-3.954 9.74-3.954 1.07 0 2.1.134 3.094.401.993.268 1.948.593 2.864.975L74.71 28.76a24.415 24.415 0 0 1-.975-2.808 11.216 11.216 0 0 1-.4-3.036c0-3.896 1.336-7.162 4.01-9.797 2.674-2.635 5.92-3.953 9.74-3.953 3.895 0 7.161 1.318 9.796 3.953 2.636 2.635 3.953 5.901 3.953 9.797 0 3.82-1.317 7.066-3.953 9.74-2.635 2.673-5.9 4.01-9.796 4.01-1.07 0-2.082-.134-3.037-.401a24.396 24.396 0 0 1-2.807-.974Z"/>
143143
</svg>
144-
<h1 class="text-4xl font-bold text-primary dark:text-indigo-400 mb-2">SVG Path Merger</h1>
144+
<h1 class="text-4xl font-bold text-primary dark:text-indigo-300 mb-2">SVG Path Merger</h1>
145145
<p class="text-lg text-slate-600 dark:text-slate-400">Merge all <code class="text-slate-800 dark:text-slate-300" aria-label="path HTML tag">&lt;path&gt;</code> elements from an SVG into a single path</p>
146146
</header>
147147

@@ -179,7 +179,7 @@ <h2 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Original S
179179
<span class="sr-only">Change background color</span>
180180
</button>
181181
</div>
182-
<output id="inputStats" for="inputSvg" class="block p-3 bg-slate-50 dark:bg-slate-900 rounded-md text-sm text-slate-600 dark:text-slate-400"></output>
182+
<output id="inputStats" for="inputSvg" class="block p-3 bg-slate-50 dark:bg-slate-900 rounded-md text-sm text-slate-700 dark:text-slate-300"></output>
183183
</div>
184184
</div>
185185

@@ -215,15 +215,15 @@ <h2 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Merged SVG
215215
<span class="sr-only">Change background color</span>
216216
</button>
217217
</div>
218-
<output id="outputStats" for="outputSvg" class="block p-3 bg-slate-50 dark:bg-slate-900 rounded-md text-sm text-slate-600 dark:text-slate-400"></output>
218+
<output id="outputStats" for="outputSvg" class="block p-3 bg-slate-50 dark:bg-slate-900 rounded-md text-sm text-slate-700 dark:text-slate-300"></output>
219219
</div>
220220
</div>
221221
</div>
222222

223223
<!-- Info Section -->
224224
<div class="mt-12 space-y-8">
225225
<div class="bg-white dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-600 rounded-lg p-8">
226-
<h2 class="text-2xl mb-4 text-primary dark:text-indigo-400 font-semibold">How to Merge SVG Paths Online</h2>
226+
<h2 class="text-2xl mb-4 text-primary dark:text-indigo-300 font-semibold">How to Merge SVG Paths Online</h2>
227227
<ol class="ml-6 list-decimal space-y-2 text-slate-600 dark:text-slate-400">
228228
<li>Paste your SVG code in the left field</li>
229229
<li>The application will automatically merge all <code class="text-slate-800 dark:text-slate-300" aria-label="path HTML tag">&lt;path&gt;</code> elements into a single path</li>
@@ -234,7 +234,7 @@ <h2 class="text-2xl mb-4 text-primary dark:text-indigo-400 font-semibold">How to
234234

235235
<!-- Why Section -->
236236
<div class="bg-white dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-600 rounded-lg p-8">
237-
<h2 class="text-2xl mb-4 text-primary dark:text-indigo-400 font-semibold">Why Merge SVG Paths?</h2>
237+
<h2 class="text-2xl mb-4 text-primary dark:text-indigo-300 font-semibold">Why Merge SVG Paths?</h2>
238238
<div class="space-y-4 text-slate-600 dark:text-slate-400">
239239
<p><strong class="text-slate-900 dark:text-slate-100">Reduce file size:</strong> Combining multiple SVG paths into one can significantly reduce your SVG file size, making your website load faster.</p>
240240
<p><strong class="text-slate-900 dark:text-slate-100">Simplify SVG structure:</strong> A single path is easier to manipulate, animate, and maintain in your code than multiple scattered paths.</p>
@@ -245,7 +245,7 @@ <h2 class="text-2xl mb-4 text-primary dark:text-indigo-400 font-semibold">Why Me
245245

246246
<!-- Features Section -->
247247
<div class="bg-white dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-600 rounded-lg p-8">
248-
<h2 class="text-2xl mb-4 text-primary dark:text-indigo-400 font-semibold">Features</h2>
248+
<h2 class="text-2xl mb-4 text-primary dark:text-indigo-300 font-semibold">Features</h2>
249249
<div class="grid md:grid-cols-2 gap-4 text-slate-600 dark:text-slate-400">
250250
<div>
251251
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">🚀 Instant Processing</h3>
@@ -276,7 +276,7 @@ <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">📋 One-Click
276276

277277
<!-- FAQ Section -->
278278
<div class="bg-white dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-600 rounded-lg p-8">
279-
<h2 class="text-2xl mb-4 text-primary dark:text-indigo-400 font-semibold">Frequently Asked Questions</h2>
279+
<h2 class="text-2xl mb-4 text-primary dark:text-indigo-300 font-semibold">Frequently Asked Questions</h2>
280280
<div class="space-y-6">
281281
<div>
282282
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">What is an SVG path?</h3>
@@ -309,7 +309,7 @@ <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">What browsers
309309
</main>
310310

311311
<footer class="text-center mt-16 pt-8 border-t border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-400">
312-
<p>Made with ❤️ by <a href="https://milanricoul.com" class="text-primary dark:text-indigo-400 hover:text-primary-hover dark:hover:text-indigo-500 transition-colors text-underline" target="_blank" rel="noopener noreferrer">firestar300</a> to simplify working with SVGs</p>
312+
<p>Made with ❤️ by <a href="https://milanricoul.com" class="font-medium text-indigo-700 underline decoration-2 underline-offset-2 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-indigo-300 dark:hover:text-indigo-200 dark:focus-visible:ring-indigo-400 dark:focus-visible:ring-offset-slate-900 rounded-sm transition-colors" target="_blank" rel="noopener noreferrer">firestar300</a> to simplify working with SVGs</p>
313313
</footer>
314314
</div>
315315

‎src/main.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -470,7 +470,7 @@ function displayPreview(container, svgCode) {
470470
} catch (error) {
471471
console.error('Error displaying preview:', error);
472472
const errorDiv = document.createElement('div');
473-
errorDiv.className = 'text-red-500 dark:text-red-400 text-center p-8';
473+
errorDiv.className = 'text-red-800 dark:text-red-300 text-center p-8';
474474
errorDiv.textContent = 'Error displaying preview';
475475
container.appendChild(errorDiv);
476476
}
@@ -542,7 +542,6 @@ function calculateReductionElement() {
542542
const outputSize = new Blob([outputSvg.value]).size;
543543
const reduction = ((1 - outputSize / inputSize) * 100).toFixed(1);
544544
const reductionNum = parseInt(reduction);
545-
const color = reductionNum === 0 ? 'inherit' : reductionNum > 0 ? '#22c55e' : '#ef4444';
546545

547546
// Create reduction info element
548547
const reductionDiv = document.createElement('div');
@@ -552,7 +551,12 @@ function calculateReductionElement() {
552551
reductionLabel.textContent = 'Reduction:';
553552

554553
const reductionValue = document.createElement('strong');
555-
reductionValue.style.color = color;
554+
reductionValue.className =
555+
reductionNum === 0
556+
? 'stat-reduction-value--neutral'
557+
: reductionNum > 0
558+
? 'stat-reduction-value--good'
559+
: 'stat-reduction-value--bad';
556560
reductionValue.textContent = `${reductionNum > 0 ? '-' : '+'}${Math.abs(reductionNum)}%`;
557561

558562
reductionDiv.appendChild(reductionLabel);
@@ -643,8 +647,8 @@ function showToast(message, type = 'success') {
643647
if (type === 'error') {
644648
bgColor = 'bg-red-700 dark:bg-red-900';
645649
} else if (type === 'warning') {
646-
bgColor = 'bg-yellow-50 dark:bg-yellow-900';
647-
textColor = 'text-slate-900 dark:text-slate-200'; // dark text for better contrast
650+
bgColor = 'bg-amber-100 dark:bg-amber-950';
651+
textColor = 'text-amber-950 dark:text-amber-100';
648652
}
649653

650654
toast.className = `fixed bottom-8 right-8 px-6 py-4 rounded-lg shadow-custom-lg font-medium transition-all duration-300 ${bgColor} ${textColor} opacity-0 translate-y-4 pointer-events-none`;

‎src/style.css‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525

2626
.btn {
2727
@apply inline-flex items-center gap-2 px-5 py-2.5 border-0 rounded-lg text-sm font-medium cursor-pointer transition-all shadow-custom;
28+
@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-900;
2829
}
2930

3031
.btn:hover {
@@ -36,10 +37,25 @@
3637
}
3738

3839
.btn-primary {
39-
@apply bg-primary dark:bg-indigo-500 text-white hover:bg-primary-hover dark:hover:bg-indigo-600;
40+
@apply bg-primary dark:bg-indigo-700 text-white hover:bg-primary-hover dark:hover:bg-indigo-800;
41+
@apply focus-visible:ring-indigo-700 dark:focus-visible:ring-indigo-300;
42+
}
43+
44+
/* Stats reduction (WCAG contrast on slate-50 / slate-900) */
45+
.stat-reduction-value--good {
46+
@apply text-emerald-800 dark:text-emerald-300;
47+
}
48+
49+
.stat-reduction-value--bad {
50+
@apply text-red-800 dark:text-red-300;
51+
}
52+
53+
.stat-reduction-value--neutral {
54+
@apply text-slate-800 dark:text-slate-200;
4055
}
4156

4257
.btn-secondary {
4358
@apply bg-slate-600 dark:bg-slate-700 text-white hover:bg-slate-700 dark:hover:bg-slate-600;
59+
@apply focus-visible:ring-slate-600 dark:focus-visible:ring-slate-400;
4460
}
4561
}

‎tailwind.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default {
1515
},
1616
colors: {
1717
primary: {
18-
DEFAULT: '#6366f1',
19-
hover: '#4f46e5',
18+
DEFAULT: '#4f46e5',
19+
hover: '#4338ca',
2020
},
2121
},
2222
boxShadow: {

0 commit comments

Comments
 (0)