Add live contrast preview to theme editor for guaranteed readability

Browse Source

- New client ColorField component shows a live 'Aa' text preview on the
  relevant background and a WCAG contrast ratio badge (✓ / ⚠)
- Flags low-contrast (<4.5:1) text fields with a red border and a
  one-click 'Use readable color' fix
- Map each text color to the background it sits on (body text -> surface,
  button text -> button color, navbar text -> navbar, admin text -> canvas)

...

This commit is contained in:

openhands committed 2026-07-13 20:04:58 +02:00

1 parent 17894db3e9

commit acc820284b

2 files changed

+170 -45

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/theme/color-field.tsx

+138

File diff suppressed because it is too large. Load diff

src/app/admin/theme/page.tsx

+32 -45

File diff suppressed because it is too large. Load diff