Skip to content

Commit 6a39948

Browse files
caiopizzolcaiopizzol
committed
fix(a11y): improve color contrast and add main landmark
Darken muted gray #9CA3AF → #6B7280 (4.6:1 ratio) and coral text #F97B6D → #D4594C (4.56:1 ratio) to meet WCAG AA. Keep original coral for decorative uses (backgrounds, borders, bar fills). Wrap page content in <main> landmark for screen readers.
1 parent 09cc75d commit 6a39948

3 files changed

Lines changed: 61 additions & 60 deletions

File tree

‎apps/web/index.html‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
}
107107

108108
.brand .accent {
109-
color: #F97B6D;
109+
color: #D4594C;
110110
}
111111

112112
.links {
@@ -116,7 +116,7 @@
116116

117117
.links a {
118118
text-decoration: none;
119-
color: #9CA3AF;
119+
color: #6B7280;
120120
font-size: 0.82rem;
121121
font-weight: 500;
122122
transition: color 0.15s;
@@ -142,7 +142,7 @@
142142
.hero-kicker {
143143
font-size: 0.72rem;
144144
font-weight: 600;
145-
color: #F97B6D;
145+
color: #D4594C;
146146
text-transform: uppercase;
147147
letter-spacing: 0.1em;
148148
margin-bottom: 12px;
@@ -159,20 +159,20 @@
159159

160160
.hero-sub {
161161
font-size: 1.05rem;
162-
color: #9CA3AF;
162+
color: #6B7280;
163163
line-height: 1.6;
164164
max-width: 560px;
165165
margin-bottom: 12px;
166166
}
167167

168168
.hero-by {
169169
font-size: 0.85rem;
170-
color: #9CA3AF;
170+
color: #6B7280;
171171
margin-bottom: 36px;
172172
}
173173

174174
.hero-by a {
175-
color: #F97B6D;
175+
color: #D4594C;
176176
text-decoration: none;
177177
font-weight: 600;
178178
}
@@ -196,7 +196,7 @@
196196

197197
.num-label {
198198
font-size: 0.72rem;
199-
color: #9CA3AF;
199+
color: #6B7280;
200200
letter-spacing: 0.02em;
201201
}
202202

@@ -210,7 +210,7 @@
210210
.section-label {
211211
font-size: 0.72rem;
212212
font-weight: 600;
213-
color: #9CA3AF;
213+
color: #6B7280;
214214
text-transform: uppercase;
215215
letter-spacing: 0.08em;
216216
margin-bottom: 20px;
@@ -249,7 +249,7 @@
249249
.tax-count {
250250
font-family: 'JetBrains Mono', monospace;
251251
font-size: 0.7rem;
252-
color: #9CA3AF;
252+
color: #6B7280;
253253
}
254254

255255
.tax-bar {
@@ -308,7 +308,7 @@
308308
gap: 12px;
309309
margin-top: 12px;
310310
font-size: 0.72rem;
311-
color: #9CA3AF;
311+
color: #6B7280;
312312
}
313313

314314
.lang-legend-item {
@@ -323,7 +323,7 @@
323323
}
324324

325325
.lang-legend-active {
326-
color: #F97B6D;
326+
color: #D4594C;
327327
font-weight: 600;
328328
}
329329

@@ -348,7 +348,7 @@
348348

349349
.explore-count {
350350
font-size: 0.72rem;
351-
color: #9CA3AF;
351+
color: #6B7280;
352352
font-family: 'JetBrains Mono', monospace;
353353
}
354354

@@ -367,13 +367,13 @@
367367
font-size: 0.72rem;
368368
font-weight: 600;
369369
background: #fef0ee;
370-
color: #F97B6D;
370+
color: #D4594C;
371371
}
372372

373373
.filter-pill button {
374374
background: none;
375375
border: none;
376-
color: #F97B6D;
376+
color: #D4594C;
377377
cursor: pointer;
378378
font-size: 0.8rem;
379379
line-height: 1;
@@ -387,7 +387,7 @@
387387
gap: 10px;
388388
margin-bottom: 16px;
389389
font-size: 0.78rem;
390-
color: #9CA3AF;
390+
color: #6B7280;
391391
}
392392

393393
.conf-filter input[type="range"] {
@@ -403,7 +403,7 @@
403403

404404
.download-guide summary {
405405
cursor: pointer;
406-
color: #9CA3AF;
406+
color: #6B7280;
407407
font-size: 0.72rem;
408408
font-weight: 600;
409409
text-transform: uppercase;
@@ -443,7 +443,7 @@
443443
border-radius: 6px;
444444
border: 1px solid #F97B6D;
445445
background: #fff;
446-
color: #F97B6D;
446+
color: #D4594C;
447447
cursor: pointer;
448448
transition: all 0.15s;
449449
white-space: nowrap;
@@ -469,7 +469,7 @@
469469
text-align: left;
470470
font-size: 0.68rem;
471471
font-weight: 600;
472-
color: #9CA3AF;
472+
color: #6B7280;
473473
text-transform: uppercase;
474474
letter-spacing: 0.06em;
475475
padding: 8px 0;
@@ -508,7 +508,7 @@
508508
}
509509

510510
.doc-link:hover .fname {
511-
color: #F97B6D;
511+
color: #D4594C;
512512
}
513513

514514
.dtable td:last-child {
@@ -525,7 +525,7 @@
525525

526526
.label-type {
527527
background: #fef0ee;
528-
color: #F97B6D;
528+
color: #D4594C;
529529
}
530530

531531
.label-topic {
@@ -536,7 +536,7 @@
536536
.mono {
537537
font-family: 'JetBrains Mono', monospace;
538538
font-size: 0.78rem;
539-
color: #9CA3AF;
539+
color: #6B7280;
540540
}
541541

542542
.conf-g {
@@ -595,7 +595,7 @@
595595
/* Loading state */
596596
.loading-row td {
597597
text-align: center;
598-
color: #9CA3AF;
598+
color: #6B7280;
599599
padding: 24px 0;
600600
}
601601

@@ -611,7 +611,7 @@
611611
.pagination-info {
612612
font-family: 'JetBrains Mono', monospace;
613613
font-size: 0.72rem;
614-
color: #9CA3AF;
614+
color: #6B7280;
615615
}
616616

617617
.pagination-btns {
@@ -622,7 +622,7 @@
622622
.pg-btn {
623623
font-family: 'JetBrains Mono', monospace;
624624
font-size: 0.78rem;
625-
color: #9CA3AF;
625+
color: #6B7280;
626626
padding: 6px 12px;
627627
border-radius: 4px;
628628
border: 1px solid #e5e5e5;
@@ -633,7 +633,7 @@
633633

634634
.pg-btn:hover {
635635
border-color: #F97B6D;
636-
color: #F97B6D;
636+
color: #D4594C;
637637
}
638638

639639
.pg-btn:disabled {
@@ -643,7 +643,7 @@
643643

644644
.pg-btn:disabled:hover {
645645
border-color: #e5e5e5;
646-
color: #9CA3AF;
646+
color: #6B7280;
647647
}
648648

649649
.pg-btn.active {
@@ -661,14 +661,14 @@
661661
align-items: center;
662662
justify-content: space-between;
663663
font-size: 0.78rem;
664-
color: #9CA3AF;
664+
color: #6B7280;
665665
max-width: 1200px;
666666
margin: 0 auto;
667667
padding: 24px 48px;
668668
}
669669

670670
.site-footer a {
671-
color: #9CA3AF;
671+
color: #6B7280;
672672
text-decoration: none;
673673
}
674674

@@ -743,7 +743,7 @@
743743
.preview-dl {
744744
border: 1px solid #F97B6D;
745745
background: #fff;
746-
color: #F97B6D;
746+
color: #D4594C;
747747
}
748748

749749
.preview-dl:hover {
@@ -754,7 +754,7 @@
754754
.preview-close {
755755
border: 1px solid #e5e5e5;
756756
background: #fff;
757-
color: #9CA3AF;
757+
color: #6B7280;
758758
}
759759

760760
.preview-close:hover {
@@ -775,18 +775,18 @@
775775
display: flex;
776776
align-items: center;
777777
justify-content: center;
778-
color: #9CA3AF;
778+
color: #6B7280;
779779
font-size: 0.85rem;
780780
}
781781

782782
.preview-badge {
783783
font-size: 0.68rem;
784-
color: #9CA3AF;
784+
color: #6B7280;
785785
font-weight: 500;
786786
}
787787

788788
.preview-badge a {
789-
color: #F97B6D;
789+
color: #D4594C;
790790
text-decoration: none;
791791
}
792792

@@ -879,7 +879,7 @@
879879
</div>
880880
</header>
881881

882-
<div class="container">
882+
<main class="container">
883883

884884
<!-- Hero -->
885885
<div class="hero">
@@ -977,7 +977,7 @@ <h1>The largest open corpus of classified Word documents</h1>
977977
<div class="pagination" id="pagination"></div>
978978
</div>
979979

980-
</div>
980+
</main>
981981

982982
<div class="site-footer">
983983
<span>Built by <a href="https://superdoc.dev/?utm_source=docxcorp.us&utm_medium=referral&utm_campaign=footer">SuperDoc</a> — DOCX editing and tooling.</span>
@@ -1019,7 +1019,7 @@ <h1>The largest open corpus of classified Word documents</h1>
10191019

10201020
// ---------- color palettes ----------
10211021
const CORAL_SHADES = ['#F97B6D', '#e06b5e', '#d45d52', '#c85046', '#bc433b'];
1022-
const GRAY_SHADES = ['#9CA3AF', '#8a919e', '#787f8d', '#666d7c', '#545b6b'];
1022+
const GRAY_SHADES = ['#6B7280', '#8a919e', '#787f8d', '#666d7c', '#545b6b'];
10231023

10241024
// ---------- helpers ----------
10251025
function $(id) { return document.getElementById(id); }

0 commit comments

Comments
 (0)