Skip to content

fix: raise contrast of tertiary text to WCAG AA #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xsmyile merged 3 commits into from
Oct 7, 2026
Merged

fix: raise contrast of tertiary text to WCAG AA #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a1fa26
fix: raise contrast of tertiary text to WCAG AA
xsmyile Oct 6, 2026
901143b
fix: raise contrast of the remaining controls to WCAG AA
xsmyile Oct 6, 2026
dac9f59
fix: keep tertiary text at WCAG AA on hover and focus surfaces
xsmyile Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions ui/src/components/DetailRail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function Section(props: {
return (
<section class="px-4 py-3.5">
<div class="flex items-center justify-between gap-2 mb-2 min-h-5">
<h3 class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
<h3 class="text-[10px] font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">
{props.label}
</h3>
{props.aside}
Expand Down Expand Up @@ -150,7 +150,7 @@ export default function DetailRail(props: {
<button
onClick={() => props.onToggleHeaders()}
aria-expanded={props.headersOpen}
class="rounded-md px-1.5 py-0.5 text-[11px] font-medium text-orange-600 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
class="rounded-md px-1.5 py-0.5 text-[11px] font-medium text-orange-700 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
>
{props.headersOpen ? "Hide headers" : "Show headers"}
</button>
Expand All @@ -159,7 +159,7 @@ export default function DetailRail(props: {
<Show
when={props.headersOpen}
fallback={
<p class="text-xs text-zinc-400 dark:text-zinc-500">
<p class="text-xs text-zinc-500 dark:text-zinc-400">
Every header the message carries, as received.
</p>
}
Expand All @@ -185,23 +185,23 @@ export default function DetailRail(props: {
function SummaryList(props: { message: Message }) {
return (
<dl class="grid grid-cols-[3.25rem_minmax(0,1fr)] gap-x-3 gap-y-2 text-xs">
<dt class="text-zinc-400 dark:text-zinc-500">From</dt>
<dt class="text-zinc-500 dark:text-zinc-400">From</dt>
<dd class="text-zinc-800 dark:text-zinc-200 break-all">
{props.message.sender || "(no sender)"}
</dd>
<dt class="text-zinc-400 dark:text-zinc-500">To</dt>
<dt class="text-zinc-500 dark:text-zinc-400">To</dt>
<dd class="text-zinc-800 dark:text-zinc-200 break-all">
<For each={props.message.recipients}>{(r) => <div>{r}</div>}</For>
</dd>
<dt class="text-zinc-400 dark:text-zinc-500">Date</dt>
<dt class="text-zinc-500 dark:text-zinc-400">Date</dt>
<dd class="text-zinc-800 dark:text-zinc-200">
{formatDateTime(props.message.created_at)}
</dd>
<dt class="text-zinc-400 dark:text-zinc-500">Size</dt>
<dt class="text-zinc-500 dark:text-zinc-400">Size</dt>
<dd class="text-zinc-800 dark:text-zinc-200">
{formatSize(props.message.size)}
</dd>
<dt class="text-zinc-400 dark:text-zinc-500 pt-0.5">Tags</dt>
<dt class="text-zinc-500 dark:text-zinc-400 pt-0.5">Tags</dt>
<dd>
<TagEditor message={props.message} />
</dd>
Expand All @@ -224,7 +224,7 @@ function AuthList(props: { results: AuthResults }) {
<Show
when={!isEmpty()}
fallback={
<div class="text-xs text-zinc-400 dark:text-zinc-500">
<div class="text-xs text-zinc-500 dark:text-zinc-400">
<p>No authentication headers found.</p>
<p class="mt-1">
DKIM, SPF, and DMARC headers are typically added by receiving mail
Expand Down Expand Up @@ -279,7 +279,7 @@ function AttachmentsSection(props: {
aside={
<Show when={props.files}>
{(list) => (
<span class="text-[11px] tabular-nums text-zinc-400 dark:text-zinc-500">
<span class="text-[11px] tabular-nums text-zinc-500 dark:text-zinc-400">
{list().length}
</span>
)}
Expand All @@ -300,7 +300,7 @@ function AttachmentsSection(props: {
<Show
when={list().length > 0}
fallback={
<p class="text-xs text-zinc-400 dark:text-zinc-500">
<p class="text-xs text-zinc-500 dark:text-zinc-400">
No attachments
</p>
}
Expand All @@ -312,15 +312,15 @@ function AttachmentsSection(props: {
<a
href={api.attachmentUrl(props.message.id, att.id)}
download={att.filename || "attachment"}
class="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
class="group/attachment flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
>
<PaperclipIcon class="size-3.5 shrink-0 text-zinc-400 dark:text-zinc-500" />
<span class="min-w-0 flex-1 truncate">
{att.filename || "attachment"}
</span>
<Show when={att.size}>
{(size) => (
<span class="shrink-0 tabular-nums text-zinc-400 dark:text-zinc-500">
<span class="shrink-0 tabular-nums text-zinc-500 group-hover/attachment:text-zinc-600 dark:text-zinc-400 dark:group-hover/attachment:text-zinc-400">
{formatSize(size())}
</span>
)}
Expand Down Expand Up @@ -364,15 +364,15 @@ function LinksSection(props: { message: Message }) {
<Section
label="Links"
aside={
<span class="text-[11px] tabular-nums text-zinc-400 dark:text-zinc-500">
<span class="text-[11px] tabular-nums text-zinc-500 dark:text-zinc-400">
{links().length}
</span>
}
>
<Show
when={links().length > 0}
fallback={
<p class="text-xs text-zinc-400 dark:text-zinc-500">No links</p>
<p class="text-xs text-zinc-500 dark:text-zinc-400">No links</p>
}
>
<ul class="-mx-2 space-y-0.5">
Expand All @@ -381,7 +381,7 @@ function LinksSection(props: { message: Message }) {
<Show when={shown().length < links().length}>
<button
onClick={() => setExpanded(true)}
class="mt-1.5 -ml-1.5 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-orange-600 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
class="mt-1.5 -ml-1.5 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-orange-700 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
>
Show all {links().length}
</button>
Expand Down Expand Up @@ -435,17 +435,17 @@ function LinkRow(props: { link: MessageLink }) {
target="_blank"
rel="noopener noreferrer"
title={props.link.href}
class="min-w-0 flex-1 rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
class="group/link min-w-0 flex-1 rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
>
<span class="flex items-center gap-1.5 text-[11px]">
<span class="min-w-0 shrink truncate font-mono text-zinc-700 dark:text-zinc-300">
{props.link.host}
</span>
<span class="min-w-0 flex-1 truncate text-zinc-400 dark:text-zinc-500">
<span class="min-w-0 flex-1 truncate text-zinc-500 group-hover/link:text-zinc-600 dark:text-zinc-400 dark:group-hover/link:text-zinc-400">
{props.link.path}
</span>
<Show when={props.link.count > 1}>
<span class="shrink-0 tabular-nums text-zinc-400 dark:text-zinc-500">
<span class="shrink-0 tabular-nums text-zinc-500 group-hover/link:text-zinc-600 dark:text-zinc-400 dark:group-hover/link:text-zinc-400">
×{props.link.count}
</span>
</Show>
Expand All @@ -457,7 +457,7 @@ function LinkRow(props: { link: MessageLink }) {
</Show>
</span>
<Show when={props.link.text}>
<span class="mt-0.5 block truncate text-[11px] text-zinc-400 dark:text-zinc-500">
<span class="mt-0.5 block truncate text-[11px] text-zinc-500 group-hover/link:text-zinc-600 dark:text-zinc-400 dark:group-hover/link:text-zinc-400">
{props.link.text}
</span>
</Show>
Expand All @@ -472,7 +472,7 @@ function LinkRow(props: { link: MessageLink }) {
: `Copy the link to ${props.link.host}`
}
title={feedback() === "copied" ? "Copied" : "Copy"}
class="mt-1 shrink-0 rounded p-1 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
class="mt-1 shrink-0 rounded p-1 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
>
<CopyIcon class="size-3" />
</button>
Expand All @@ -482,7 +482,7 @@ function LinkRow(props: { link: MessageLink }) {
<span ref={fullHref} class="font-mono break-all">
{props.link.href}
</span>
<span class="block text-zinc-400 dark:text-zinc-500">
<span class="block text-zinc-500 dark:text-zinc-400">
{MANUAL_COPY_HINT}
</span>
</p>
Expand Down Expand Up @@ -568,7 +568,7 @@ function TagEditor(props: { message: MessageSummary }) {
removeTag(tags()[tags().length - 1]);
}
}}
class="bg-transparent text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-400 dark:placeholder-zinc-600 outline-none min-w-[80px] flex-1 rounded-md px-1.5 py-0.5 transition focus:bg-zinc-100 dark:focus:bg-zinc-800/60"
class="bg-transparent text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-500 focus:placeholder-zinc-600 dark:placeholder-zinc-400 dark:focus:placeholder-zinc-400 outline-none min-w-[80px] flex-1 rounded-md px-1.5 py-0.5 transition focus:bg-zinc-100 dark:focus:bg-zinc-800/60"
/>
</div>
);
Expand Down
24 changes: 12 additions & 12 deletions ui/src/components/FilterBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function Chip(props: {
class={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-medium border transition-colors cursor-pointer select-none ${
props.active
? props.activeClass
: "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-600 dark:hover:text-zinc-400"
: "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-700 dark:hover:text-zinc-300"
}`}
>
<Show when={props.icon}>
Expand Down Expand Up @@ -110,8 +110,8 @@ function TagDropdown() {
onClick={() => setOpen(!open())}
class={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-medium border transition-colors cursor-pointer select-none ${
filters().tags.length > 0
? "bg-orange-50 dark:bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-500/30"
: "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-600 dark:hover:text-zinc-400"
? "bg-orange-50 dark:bg-orange-500/15 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-500/30"
: "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-700 dark:hover:text-zinc-300"
}`}
>
<svg
Expand Down Expand Up @@ -163,7 +163,7 @@ function TagDropdown() {
<Show
when={allTags().length > 0}
fallback={
<div class="px-3 py-4 text-xs text-zinc-400 dark:text-zinc-500 text-center">
<div class="px-3 py-4 text-xs text-zinc-500 dark:text-zinc-400 text-center">
No tags yet
</div>
}
Expand All @@ -176,15 +176,15 @@ function TagDropdown() {
value={tagQuery()}
onInput={(e) => setTagQuery(e.currentTarget.value)}
placeholder="Filter tags..."
class="w-full rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2 py-1 text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-400 dark:placeholder-zinc-500 outline-none focus:border-zinc-400 dark:focus:border-zinc-600"
class="w-full rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2 py-1 text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-500 dark:placeholder-zinc-400 outline-none focus:border-zinc-400 dark:focus:border-zinc-600"
/>
</div>
</Show>
<div class="py-1">
<Show
when={visibleTags().length > 0}
fallback={
<div class="px-3 py-3 text-xs text-zinc-400 dark:text-zinc-500 text-center">
<div class="px-3 py-3 text-xs text-zinc-500 dark:text-zinc-400 text-center">
No matching tags
</div>
}
Expand Down Expand Up @@ -237,7 +237,7 @@ function TagDropdown() {
</Show>
</div>
<Show when={tagFiltersFull()}>
<div class="border-t border-zinc-100 dark:border-zinc-800 px-3 py-1.5 text-[11px] text-zinc-400 dark:text-zinc-500">
<div class="border-t border-zinc-100 dark:border-zinc-800 px-3 py-1.5 text-[11px] text-zinc-500 dark:text-zinc-400">
Up to {MAX_TAG_FILTERS} tags at a time
</div>
</Show>
Expand All @@ -248,7 +248,7 @@ function TagDropdown() {
clearTagFilters();
setOpen(false);
}}
class="text-[11px] text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition cursor-pointer"
class="text-[11px] text-zinc-500 dark:text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition cursor-pointer"
>
Reset tags
</button>
Expand Down Expand Up @@ -294,7 +294,7 @@ export default function FilterBar() {
placeholder="Search emails..."
value={search()}
onInput={(e) => onSearchInput(e.currentTarget.value)}
class="w-full rounded-md border border-zinc-200 dark:border-zinc-700/60 bg-zinc-50 dark:bg-zinc-950/40 pl-8 pr-3 py-1.5 text-sm text-zinc-800 dark:text-zinc-200 placeholder-zinc-400 dark:placeholder-zinc-500 outline-none focus:border-zinc-400 dark:focus:border-zinc-500 transition"
class="w-full rounded-md border border-zinc-200 dark:border-zinc-700/60 bg-zinc-50 dark:bg-zinc-950/40 pl-8 pr-3 py-1.5 text-sm text-zinc-800 dark:text-zinc-200 placeholder-zinc-500 dark:placeholder-zinc-400 outline-none focus:border-zinc-400 dark:focus:border-zinc-500 transition"
/>
</label>

Expand All @@ -303,7 +303,7 @@ export default function FilterBar() {
label="Starred"
icon={"\u2605"}
active={f().starred}
activeClass="bg-amber-50 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/30"
activeClass="bg-amber-50 dark:bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-500/30"
onClick={() => toggleFilter("starred")}
/>
<Chip
Expand All @@ -323,12 +323,12 @@ export default function FilterBar() {

<Show when={hasActiveFilters()}>
<div class="ml-auto flex items-center gap-2">
<span class="text-[11px] text-zinc-400 dark:text-zinc-600">
<span class="text-[11px] text-zinc-500 dark:text-zinc-400">
{listSize()} {listSize() === 1 ? "match" : "matches"}
</span>
<button
onClick={clearFilters}
class="text-[11px] text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition cursor-pointer"
class="text-[11px] text-zinc-500 dark:text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition cursor-pointer"
>
Clear
</button>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function Header() {
<h1 class="font-brand text-lg font-bold tracking-tight bg-linear-to-r from-orange-500 to-zinc-300 dark:to-white bg-clip-text text-transparent">
RustMail
</h1>
<span class="text-xs tabular-nums text-zinc-500 dark:text-zinc-500 truncate">
<span class="text-xs tabular-nums text-zinc-500 dark:text-zinc-400 truncate">
{total()} {total() === 1 ? "message" : "messages"}
</span>
</div>
Expand Down
Loading
Loading