comunes/tane
1
0
Fork 0
Code Issues Pull requests Projects Releases 7 Packages Wiki Activity Actions

fix(ui): darken seedMuted and app-bar green to meet WCAG AA contrast

Browse source 
seedMuted (hints, card subtitles, search placeholder) was #8A9880 —
2.62:1 on the canvas and 3.05:1 on white, failing AA for the 13px text
it colours. Darkened to #617057: 5.30:1 on white, 4.56:1 on canvas,
4.88:1 on the field fill, same muted green-grey hue.

The new contrast test also caught the app-bar green: white titles on
#3E8C38 were 4.19:1, so it is nudged to #3A8434 (4.64:1) — a barely
visible change.

test/ui/theme_contrast_test.dart pins the WCAG relative-luminance math
and asserts every text/background pair the palette actually uses.
This commit is contained in:
vjrj 2026-07-09 12:50:26 +02:00
parent 2812c99280
commit 21072633b5
3 changed files with 60 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/app_seeds/lib/ui/inventory_list_screen.dart
View file

@ -233,8 +233,7 @@ class _VarietyTile extends StatelessWidget {
),
trailing: IconButton(
icon: const Icon(Icons.edit_outlined),
// Action colour (≥3:1 on the canvas) so the control stays legible;
// seedMuted here fell to 2.62:1.
// Action colour: this is a tap target, not secondary text.
color: seedGreen,
tooltip: context.t.common.edit,
onPressed: open,

9
apps/app_seeds/lib/ui/theme.dart
View file

@ -6,7 +6,9 @@ import 'package:flutter/material.dart';
/// headers) and a soft green container for selected/tonal surfaces.
const seedGreen = Color(0xFF2F7D34); // primary (actions, links, headers)
const seedGreenDark = Color(0xFF22521E); // status bar / darker green
const seedAppBar = Color(0xFF3E8C38); // app-bar green
// App-bar green. Nudged down from the mockups' #3E8C38 so its white title
// meets WCAG AA (4.5:1) — see test/ui/theme_contrast_test.dart.
const seedAppBar = Color(0xFF3A8434);
const seedCanvas = Color(0xFFE7F1E0); // surface / scaffold
const seedPrimaryContainer = Color(0xFFD3E8C8); // tonal green container
const seedOnPrimaryContainer = Color(0xFF2F6D2A);
@ -18,7 +20,10 @@ const seedDivider = Color(0xFFE4E9DD);
const seedTitle = Color(0xFF1B2416); // heading text on canvas
const seedOnSurface = Color(0xFF1B2416);
const seedOnSurfaceVariant = Color(0xFF5C6B52); // scientific names, secondary
const seedMuted = Color(0xFF8A9880); // hints, list edit icon
// Hints and secondary text/icons. Darkened from the mockups' #8A9880 (which
// fell below WCAG AA) to keep ≥4.5:1 on white, the canvas and the field fill —
// see test/ui/theme_contrast_test.dart.
const seedMuted = Color(0xFF617057);
const seedRating = Color(0xFFE8A200); // stars
ThemeData buildTaneTheme() {