Accessibility
Contrast findings
Measure actual source colors and flag weaknesses without claiming overall accessibility conformance.
On this page
Measurement method
Source Tailwind values are resolved by Chromium to sRGB pixels using a canvas, then tested with the WCAG relative-luminance formula. Ratios compare solid foreground/background pairs. They do not certify composited dark badges, disabled opacity, focus rings, screenshots, or assistive-technology behavior.
Measured pairs
| Theme | Role | Ratio | Normal text |
|---|---|---|---|
| light | Primary text on card | 17.72:1 | Pass |
| light | Secondary text on card | 4.83:1 | Pass |
| light | Muted metadata on card | 2.62:1 | Below 4.5:1 |
| light | Muted text on canvas | 2.51:1 | Below 4.5:1 |
| light | Primary action label | 5.89:1 | Pass |
| light | Accent text on light tint | 6.65:1 | Pass |
| dark | Primary text on card | 16.12:1 | Pass |
| dark | Secondary text on card | 6.75:1 | Pass |
| dark | Muted/dim text on card | 3.67:1 | Below 4.5:1 |
| dark | Primary action label | 5.89:1 | Pass |
| dark | Accent text on card | 9.55:1 | Pass |
Findings and remediation
- Light zinc-400 text appears in many labels and metadata locations and is below 4.5:1 on light surfaces. Use a stronger verified tone before treating it as essential readable text.
- Measure alpha badge backgrounds against their real parent, including nested dark surfaces.
- Keep status names and icons in addition to color.
- Review placeholder contrast independently from entered text.
- Retain readable focus indicators at both themes and all relevant surfaces.
Scope of claim
This is an audited finding list, not a WCAG certification. No source application changes are made as part of the portfolio documentation.
Source references
| File | Responsibility |
|---|---|
| components/ui/primitives.tsx | Text/action colors |
| components/inbox/conversation-list.tsx | Metadata colors |
| app/globals.css | Native canvas colors |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0