lfg2025/archy
1
0
Fork 0
Code Issues 24 Pull Requests 4 Actions Packages Projects Releases 71 Wiki Activity

fix(a11y): color contrast audit — document ratios, fix critical text

Browse Source 
Documents WCAG AA contrast ratios in main.css. Increases text-white/40
to /50 for settings labels, section headers, and loading states to
meet 4.5:1 minimum contrast ratio.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-04 22:46:27 +00:00
co-authored by Claude Opus 4.6
parent 3258c047d9
commit 91dbaee38c
4 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/chat/SettingsModal.vue
+6 -6
View File
@@ -34,7 +34,7 @@
<!-- Memory Section -->
<div class="space-y-2">
<h3 class="text-xs font-semibold uppercase tracking-wider text-white/40">
<h3 class="text-xs font-semibold uppercase tracking-wider text-white/50">
Memory ({{ memoryStore.items.length }}/20)
</h3>
@@ -109,14 +109,14 @@
<!-- Advanced Section -->
<div class="space-y-3">
<h3 class="text-xs font-semibold uppercase tracking-wider text-white/40">
<h3 class="text-xs font-semibold uppercase tracking-wider text-white/50">
Advanced
</h3>
<template v-if="conv">
<div class="space-y-1">
<div class="flex items-center justify-between">
<label class="text-xs text-white/40">Temperature</label>
<label class="text-xs text-white/50">Temperature</label>
<span class="text-xs text-white/50 tabular-nums">{{ temperature.toFixed(2) }}</span>
</div>
<input
@@ -132,7 +132,7 @@
<div class="space-y-1">
<div class="flex items-center justify-between">
<label class="text-xs text-white/40">Max Tokens</label>
<label class="text-xs text-white/50">Max Tokens</label>
<span class="text-xs text-white/50 tabular-nums">{{ maxTokens }}</span>
</div>
<input
@@ -148,7 +148,7 @@
<div class="space-y-1">
<div class="flex items-center justify-between">
<label class="text-xs text-white/40">Top P</label>
<label class="text-xs text-white/50">Top P</label>
<span class="text-xs text-white/50 tabular-nums">{{ topP.toFixed(2) }}</span>
</div>
<input
@@ -163,7 +163,7 @@
</div>
<div class="space-y-1">
<label class="text-xs text-white/40">Stop Sequences</label>
<label class="text-xs text-white/50">Stop Sequences</label>
<div v-if="stopSequences.length > 0" class="flex gap-1 flex-wrap mb-1">
<span
v-for="(seq, i) in stopSequences"
packages/app/src/components/renderers/PdfViewer.vue
+1 -1
View File
@@ -60,7 +60,7 @@
<!-- PDF canvas container -->
<div ref="containerRef" class="flex-1 overflow-auto bg-black/20 p-4 flex justify-center">
<div v-if="loading" class="flex items-center justify-center h-full">
<div class="text-sm text-white/40">Loading PDF...</div>
<div class="text-sm text-white/50">Loading PDF...</div>
</div>
<div v-else-if="error" class="flex items-center justify-center h-full">
<div class="text-sm text-red-400/70">{{ error }}</div>
packages/app/src/pages/BrowsePage.vue
+1 -1
View File
@@ -35,7 +35,7 @@
<!-- File tree / project list -->
<div class="flex-1 overflow-y-auto px-2 py-2">
<div v-if="loading" class="flex items-center justify-center h-32">
<span class="text-sm text-white/40">Loading...</span>
<span class="text-sm text-white/50">Loading...</span>
</div>
<div v-else-if="error" class="flex items-center justify-center h-32">
<span class="text-sm text-red-400/70">{{ error }}</span>
packages/app/src/styles/main.css
+17
View File
@@ -1,5 +1,22 @@
@import "tailwindcss";
/*
* WCAG AA Color Contrast Audit (against #0a0a0a background)
*
* text-white/25: ~2.3:1 — FAIL (placeholder only, acceptable per WCAG)
* text-white/40: ~3.8:1 — FAIL (used for muted labels; borderline)
* text-white/50: ~5.4:1 — PASS (minimum for readable body text)
* text-white/60: ~7.2:1 — PASS
* text-white/70: ~9.1:1 — PASS
* text-white/80: ~11.3:1 — PASS
* text-white/90: ~13.7:1 — PASS
* #F7931A (accent): ~8.7:1 — PASS
*
* Note: text-white/40 is used as "muted" throughout the design system.
* For decorative labels and supplementary info this is acceptable.
* For readable body text, use text-white/50 minimum.
*/
@theme {
--color-primary: #606060;
--color-primary-light: #808080;