fix: make form errors and has_many headings readable

README.md

@@ -382,6 +382,8 @@ Three things changed shape and are worth knowing if you already set variables:
 | `$skinBorderColor` / `$skinBorderColorDark` | ![#e0e4e9](docs/swatches/e0e4e9.svg) `#e0e4e9` / ![#404750](docs/swatches/404750.svg) `#404750` | borders / grid lines |
 | `$skinInputBgColor` / `$skinInputBgColorDark` | ![#ffffff](docs/swatches/ffffff.svg) `#ffffff` / ![#1e2227](docs/swatches/1e2227.svg) `#1e2227` | form control background |
 | `$skinInputBorderColor` / `$skinInputBorderColorDark` | ![#c9ced4](docs/swatches/c9ced4.svg) `#c9ced4` / ![#4d555f](docs/swatches/4d555f.svg) `#4d555f` | form control border |
+| `$skinErrorTextColor` / `$skinErrorTextColorDark` | ![#932419](docs/swatches/932419.svg) `#932419` / ![#f49b9b](docs/swatches/f49b9b.svg) `#f49b9b` | validation messages |
+| `$skinErrorBgColor` / `$skinErrorBgColorDark` | ![#fae6e4](docs/swatches/fae6e4.svg) `#fae6e4` / ![#3a2224](docs/swatches/3a2224.svg) `#3a2224` | error summary above a form |
 
 #### Header menu
 

app/assets/stylesheets/wigu/active_admin_theme.scss

@@ -123,6 +123,11 @@ $skinLinkColorDark: #7cc0ec!default;
 // match); dark uses a lightened red, since the default red is too dark there.
 $skinDeleteLinkColor: $skinLinkColor!default;
 $skinDeleteLinkColorDark: #f49b9b!default;
+// Validation errors: message text and summary block fill.
+$skinErrorTextColor: #932419!default;
+$skinErrorTextColorDark: #f49b9b!default;
+$skinErrorBgColor: #fae6e4!default;
+$skinErrorBgColorDark: #3a2224!default;
 // Tabs: fill and label colours per mode. yeti-web sets all four to make the
 // inactive tabs recede to the page background and the active one read as raised.
 $skinTabInactiveColor: #f7f9fb!default;
@@ -186,6 +191,8 @@ $skinStatusTagErrorColor: #ce483b!default;    // error / errored / red
   --aa-active-tab-text:   #{$skinActiveTabTextColorDark};
   --aa-inactive-tab-text: #{$skinInactiveTabTextColorDark};
   --aa-delete-link:   #{$skinDeleteLinkColorDark};
+  --aa-error:         #{$skinErrorTextColorDark};
+  --aa-error-bg:      #{$skinErrorBgColorDark};
 }
 :root {
   color-scheme: light;
@@ -217,6 +224,8 @@ $skinStatusTagErrorColor: #ce483b!default;    // error / errored / red
   --aa-active-tab-text:   #{$skinActiveTabTextColor};
   --aa-inactive-tab-text: #{$skinInactiveTabTextColor};
   --aa-delete-link:   #{$skinDeleteLinkColor};
+  --aa-error:         #{$skinErrorTextColor};
+  --aa-error-bg:      #{$skinErrorBgColor};
 
   // Bridge for the companion active_admin_datetimepicker plugin: feed its
   // --aa-datetimepicker-* inputs from this theme's palette, so the xdsoft picker
@@ -337,6 +346,10 @@ $logout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
   skinLinkColorDark: $skinLinkColorDark,
   skinDeleteLinkColor: $skinDeleteLinkColor,
   skinDeleteLinkColorDark: $skinDeleteLinkColorDark,
+  skinErrorTextColor: $skinErrorTextColor,
+  skinErrorTextColorDark: $skinErrorTextColorDark,
+  skinErrorBgColor: $skinErrorBgColor,
+  skinErrorBgColorDark: $skinErrorBgColorDark,
   skinTabInactiveColor: $skinTabInactiveColor,
   skinTabInactiveColorDark: $skinTabInactiveColorDark,
   skinActiveTabTextColor: $skinActiveTabTextColor,
@@ -702,7 +715,7 @@ body.active_admin {
         text-shadow: none;
         margin-bottom: 0;
         a, span {
-          color: lighten( $skinMainFirstColor, 30% )!important;
+          color: mix(#ffffff, $skinTitleBarColor, 60%)!important;
         }
       }
       // Own a sensible title size so consumer apps don't each shrink AA's large
@@ -1242,8 +1255,16 @@ body.active_admin {
 form fieldset > ol > li fieldset.fragments ol {
   margin-left: 20%;
 }
-form fieldset ol > li.has_many_container h3 {
-  color: #8494a8;
+form .has_many_container h3 {
+  color: var(--aa-text-muted);
+}
+form fieldset > ol > li p.inline-errors,
+form fieldset > ol > li ul.errors,
+form ul.errors {
+  color: var(--aa-error);
+}
+form ul.errors {
+  background: var(--aa-error-bg);
 }
 form input[type=submit], form input[type=button], form button, a.button, a:link.button, a:visited.button {
   background-image: none;

test/css_check.rb

@@ -61,6 +61,8 @@ module CssCheck
     "$skinStatusTagWarnColor: none"       => '$skinStatusTagWarnColor: none;',
     "$skinStatusTagErrorColor: none"      => '$skinStatusTagErrorColor: none;',
     "$skinStatusTagTextColor as a length" => '$skinStatusTagTextColor: 10px;',
+    "$skinErrorTextColor: none"           => '$skinErrorTextColor: none;',
+    "$skinErrorBgColorDark: none"         => '$skinErrorBgColorDark: none;',
   }.freeze
 
   # The variables table in the README is the public contract people configure
@@ -242,6 +244,41 @@ def self.status_tag_labels_are_readable
     problems
   end
 
+  # The same bar for the other text the theme paints on a fill it also owns.
+  # The breadcrumb is read from the compiled output, and a missing match raises
+  # rather than letting the guard go quiet.
+  def self.message_pairs
+    crumb = compile("")[/span\.breadcrumb span\s*\{\s*color:\s*(#\h+)/, 1]
+    raise "css_check: no breadcrumb colour found" if crumb.nil?
+
+    {
+      "breadcrumb" => [crumb, "$skinTitleBarColor"],
+      "error_on_panel" => ["$skinErrorTextColor", "$skinSurfaceColor"],
+      "error_on_panel_dark" => ["$skinErrorTextColorDark", "$skinSurfaceColorDark"],
+      "error_summary" => ["$skinErrorTextColor", "$skinErrorBgColor"],
+      "error_summary_dark" => ["$skinErrorTextColorDark", "$skinErrorBgColorDark"],
+      "has_many_heading" => ["$skinTextMutedColor", "$skinPageBgColor"],
+      "has_many_heading_dark" => ["$skinTextMutedColorDark", "$skinPageBgColorDark"]
+    }
+  end
+
+  def self.messages_are_readable
+    pairs = message_pairs
+    probe = pairs.flat_map { |name, (text, fill)| [["#{name}_text", text], ["#{name}_fill", fill]] }.map do |name, colour|
+      ".css-check-#{name} { r: red(#{colour}); g: green(#{colour}); b: blue(#{colour}); }"
+    end
+    colours = compile("", probe.join("\n"))
+              .scan(/\.css-check-(\w+)\s*\{\s*r:\s*([\d.]+);\s*g:\s*([\d.]+);\s*b:\s*([\d.]+);?\s*\}/)
+              .to_h { |name, *rgb| [name, rgb.map { |v| v.to_f.round }] }
+
+    pairs.keys.filter_map do |name|
+      text, fill = colours.fetch("#{name}_text"), colours.fetch("#{name}_fill")
+      ratio = contrast(text, fill)
+      next if ratio >= LABEL_MINIMUM
+      "#{name}: #{hex(text)} on #{hex(fill)} is #{format("%.3f", ratio)}:1, under #{LABEL_MINIMUM}"
+    end
+  end
+
   def self.hex(rgb)
     format("#%02x%02x%02x", *rgb)
   end
@@ -317,6 +354,7 @@ def self.run
     # before the second ran — so a run could report one problem while holding
     # three, and each fix revealed the next.
     failures.concat(status_tag_labels_are_readable)
+    failures.concat(messages_are_readable)
     failures.concat(readme_table_matches_declarations)
 
     unless failures.empty?