Accessibility and content
Contrast and visual perception
Validate real role pairings rather than assuming every theme token combination is safe.
On this page
Checks by context
| Pairing | Verification |
|---|---|
| Body copy | Foreground on background/paper; normal text target at least 4.5:1. |
| Metadata | Muted on its actual surface; no additional opacity reduction. |
| Accent links | Public orange and admin teal must be assessed independently; normal text may need a different treatment. |
| Action variants | Primary/secondary/success/danger text, borders and disabled states in both themes. |
| Focus and boundaries | Visible control/focus indicators need sufficient contrast against adjacent colors. |
| Charts and maps | Labels, markers and series must remain distinguishable beyond color alone. |
Measured source pairings
| Context | Text / surface | Contrast | Assessment |
|---|---|---|---|
| Public reading | #282523 / #fbfaf7 | 14.59:1 | Strong normal-text pairing. |
| Public metadata | #66645f / #fffefb | 5.86:1 | Normal-text pairing; avoid reducing opacity further. |
| Public orange on light canvas | #e86f00 / #fbfaf7 | 3.00:1 | Below 4.5:1 for normal text. Review small accent labels/links; use a darker text-specific role or foreground treatment. |
| Public orange in dark | #ff8a1f / #14120f | 7.93:1 | Strong text pairing. |
| Admin primary light | #ffffff / #2f6f84 | 5.63:1 | Normal-text pairing. |
| Admin primary dark | #111318 / #78b8c8 | 8.40:1 | Strong normal-text pairing. |
| Admin success dark | #ffffff / #47c99a | 2.08:1 | Below normal and large-text targets. AdminButton success keeps white text; review a dark success-contrast role before shipping this variant. |
Measurement boundary
Ratios use the audited opaque sRGB hex values and relative luminance. They identify concrete source pairings, not a blanket conformance result. Color-mix, alpha overlays, hover/disabled states and actual text size still need computed-style review. The guide records these issues without changing the Townwell source or disguising them in screenshots.
Release checks
- Measure computed foreground/background values, including color-mix and alpha.
- Review large versus normal text using actual font weight/size.
- Test forced-colors and zoom; do not suppress native outlines without a replacement.
- No blanket WCAG pass is claimed by these screenshots.
Source references
| File | Responsibility |
|---|---|
| app/globals.css | Audited Townwell implementation; use this file when extending this interface. |
| components/admin-ui.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/admin/admin-traffic-chart.tsx | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1