fix(accessibility): Improve color contrast for WCAG AA compliance

Phase 4.4 Accessibility:
- Change white text to navy-dark on orange table headers (ratio 4.8:1)
- Fix subtotal rows in APU tables: orange text to navy for better contrast
- Affects styles 2, 5, 7, 10 in generic tables
- Fixes PageSpeed accessibility warnings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-27 16:16:55 -06:00
parent 23a3c4d074
commit 4ad48b4326
2 changed files with 12 additions and 7 deletions

View File

@@ -63,13 +63,14 @@
/* ======================================== /* ========================================
STYLE 2: Orange Header with Light Background STYLE 2: Orange Header with Light Background
Fase 4.4 Accesibilidad: Texto oscuro para contraste WCAG AA (4.5:1)
======================================== */ ======================================== */
.post-content table:not(.analisis table):nth-of-type(3) thead tr:first-child th, .post-content table:not(.analisis table):nth-of-type(3) thead tr:first-child th,
.post-content table:not(.analisis table):nth-of-type(3) tbody tr:first-child td, .post-content table:not(.analisis table):nth-of-type(3) tbody tr:first-child td,
.post-content table:not(.analisis table):nth-of-type(3) tr:first-child td { .post-content table:not(.analisis table):nth-of-type(3) tr:first-child td {
background: var(--color-orange-primary); background: var(--color-orange-primary);
color: #ffffff !important; color: var(--color-navy-dark) !important;
border: none !important; border: none !important;
box-shadow: 0 2px 8px rgba(255, 133, 0, 0.3); box-shadow: 0 2px 8px rgba(255, 133, 0, 0.3);
} }
@@ -126,13 +127,14 @@
/* ======================================== /* ========================================
STYLE 5: Orange Gradient Header STYLE 5: Orange Gradient Header
Fase 4.4 Accesibilidad: Texto oscuro para contraste WCAG AA (4.5:1)
======================================== */ ======================================== */
.post-content table:not(.analisis table):nth-of-type(6) thead tr:first-child th, .post-content table:not(.analisis table):nth-of-type(6) thead tr:first-child th,
.post-content table:not(.analisis table):nth-of-type(6) tbody tr:first-child td, .post-content table:not(.analisis table):nth-of-type(6) tbody tr:first-child td,
.post-content table:not(.analisis table):nth-of-type(6) tr:first-child td { .post-content table:not(.analisis table):nth-of-type(6) tr:first-child td {
background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%); background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%);
color: #ffffff !important; color: var(--color-navy-dark) !important;
border: none !important; border: none !important;
box-shadow: 0 2px 8px rgba(255, 133, 0, 0.35); box-shadow: 0 2px 8px rgba(255, 133, 0, 0.35);
} }
@@ -168,13 +170,14 @@
/* ======================================== /* ========================================
STYLE 7: Light Orange Background STYLE 7: Light Orange Background
Fase 4.4 Accesibilidad: Texto oscuro para contraste WCAG AA (4.5:1)
======================================== */ ======================================== */
.post-content table:not(.analisis table):nth-of-type(8) thead tr:first-child th, .post-content table:not(.analisis table):nth-of-type(8) thead tr:first-child th,
.post-content table:not(.analisis table):nth-of-type(8) tbody tr:first-child td, .post-content table:not(.analisis table):nth-of-type(8) tbody tr:first-child td,
.post-content table:not(.analisis table):nth-of-type(8) tr:first-child td { .post-content table:not(.analisis table):nth-of-type(8) tr:first-child td {
background: var(--color-orange-primary); background: var(--color-orange-primary);
color: #ffffff !important; color: var(--color-navy-dark) !important;
border: none !important; border: none !important;
border-bottom: 3px solid var(--color-navy-primary) !important; border-bottom: 3px solid var(--color-navy-primary) !important;
} }
@@ -235,6 +238,7 @@
/* ======================================== /* ========================================
STYLE 10: Bold Orange Border STYLE 10: Bold Orange Border
Fase 4.4 Accesibilidad: Texto oscuro para contraste WCAG AA (4.5:1)
======================================== */ ======================================== */
.post-content table:not(.analisis table):nth-of-type(11) { .post-content table:not(.analisis table):nth-of-type(11) {
@@ -245,7 +249,7 @@
.post-content table:not(.analisis table):nth-of-type(11) tbody tr:first-child td, .post-content table:not(.analisis table):nth-of-type(11) tbody tr:first-child td,
.post-content table:not(.analisis table):nth-of-type(11) tr:first-child td { .post-content table:not(.analisis table):nth-of-type(11) tr:first-child td {
background: linear-gradient(135deg, var(--color-orange-hover) 0%, var(--color-orange-primary) 100%); background: linear-gradient(135deg, var(--color-orange-hover) 0%, var(--color-orange-primary) 100%);
color: #ffffff !important; color: var(--color-navy-dark) !important;
border: none !important; border: none !important;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4); box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
} }

View File

@@ -214,16 +214,17 @@
/* ======================================== /* ========================================
FILAS DE SUBTOTALES FILAS DE SUBTOTALES
(Suma de Material, Suma de Mano de Obra, etc) (Suma de Material, Suma de Mano de Obra, etc)
Fase 4.4 Accesibilidad: Color oscuro para contraste WCAG AA (4.5:1)
======================================== */ ======================================== */
.analisis table tr.subtotal-row, .analisis table tr.subtotal-row,
.desglose table tr.subtotal-row { .desglose table tr.subtotal-row {
background-color: rgba(255, 133, 0, 0.1) !important; background-color: rgba(255, 133, 0, 0.15) !important;
} }
.analisis table tr.subtotal-row td, .analisis table tr.subtotal-row td,
.desglose table tr.subtotal-row td { .desglose table tr.subtotal-row td {
font-weight: 700; font-weight: 700;
color: var(--color-orange-primary); color: #1e3a5f;
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
border: none !important; border: none !important;
} }
@@ -235,7 +236,7 @@
.analisis table tr.subtotal-row td.c6, .analisis table tr.subtotal-row td.c6,
.analisis table tr.subtotal-row td:nth-child(6) { .analisis table tr.subtotal-row td:nth-child(6) {
font-size: 1.05rem; font-size: 1.05rem;
color: var(--color-orange-primary); color: #1e3a5f;
} }
/* ======================================== /* ========================================