Increase legibility by increasing contrast

Raise contrast by slightly adjusting font-weight, color and font size (from 12.2px to 12.8px in the menu)

CHANGELOG.txt

@@ -11,6 +11,7 @@ Changelog
  * The Wagtail version number can now be obtained as a tuple using `from wagtail import VERSION` (Tim Heap)
  * `send_mail` logic has been moved from `AbstractEmailForm.process_form_submission` into `AbstractEmailForm.send_mail`. Now it's easier to override this logic (Tim Leguijt)
  * Added `before_create_page`, `before_edit_page`, `before_delete_page` hooks (Karl Hobley)
+ * Updated font sizes and colours to improve legibility of admin menu and buttons (Stein Strindhaug)
  * Fix: Migrations for wagtailcore and project template are now reversible (Benjamin Bach)
  * Fix: The default image format label text ('Full width', 'Left-aligned', 'Right-aligned') is now localised (Mikalai Radchuk)
  * Fix: Text on the front-end 'password required' form is now marked for translation (Janneke Janssen)

CONTRIBUTORS.rst

@@ -167,6 +167,7 @@ Contributors
 * Kees Hink
 * Jayden Smith
 * emg36
+* Stein Strindhaug
 
 Translators
 ===========

docs/releases/1.7.rst

@@ -41,6 +41,7 @@ Minor features
  * The Wagtail version number can now be obtained as a tuple using ``from wagtail import VERSION`` (Tim Heap)
  * ``send_mail`` logic has been moved from ``AbstractEmailForm.process_form_submission`` into ``AbstractEmailForm.send_mail``. Now it's easier to override this logic (Tim Leguijt)
  * Added ``before_create_page``, ``before_edit_page``, ``before_delete_page`` hooks (Karl Hobley)
+ * Updated font sizes and colours to improve legibility of admin menu and buttons (Stein Strindhaug)
 
 
 Bug fixes

wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss

@@ -45,6 +45,8 @@ $color-grey-3: #d9d9d9;
 $color-grey-4: #e6e6e6;
 $color-grey-5: #fafafa;
 
+$color-menu-text: #cacaca; // was #aaa wich was too low contrast
+
 $color-thead-bg: $color-grey-5;
 $color-header-bg: $color-teal; // #ff6a58;
 $color-fieldset-hover: $color-grey-5;
@@ -78,6 +80,3 @@ $font-serif: Roboto Slab, Georgia, serif;
 // misc sizing
 $thumbnail-width: 130px;
 $menu-width: 180px;
-
-
-

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss

@@ -485,7 +485,7 @@ input[type=checkbox]:checked:before {
 .button-small {
     padding: 0 0.8em;
     height: 2em;
-    font-size: 0.85em;
+    font-size: 0.95em;
 }
 
     .button-secondary {

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss

@@ -6,7 +6,7 @@ ul.listing {
 
 .listing {
     margin-bottom: 2em;
-    color: lighten($color-text-base, 20%);
+    color: lighten($color-text-base, 10%);
     font-size: 0.95em;
 
     ul {

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss

@@ -51,11 +51,14 @@ $submenu-color: darken($color-grey-1, 5%);
         -webkit-font-smoothing: auto;
         text-decoration: none;
         display: block;
-        color: #aaa;
+        color: $color-menu-text;
         padding: 0.8em 1.7em;
-        font-size: 0.95em;
-        font-weight: 300;
-
+        font-size: 1em;
+        font-weight: normal;
+        // Note, font-weights lower than normal,
+        // and font-size smaller than 1em (80% ~= 12.8px),
+        // makes the strokes thinner than 1px on non-retina screens
+        // making the text semi-transparent
         &:hover,
         &:focus {
             outline: none;
@@ -83,7 +86,7 @@ $submenu-color: darken($color-grey-1, 5%);
             position: absolute;
             right: 0.5em;
             top: 0.5em;
-            margin-top: 0.15em;
+            margin-top: 0;
         }
 
     }
@@ -146,7 +149,7 @@ $submenu-color: darken($color-grey-1, 5%);
 .explorer {
     // position: absolute;
     // margin-top: 70px;
-    font-size: 0.95em;
+    font-size: 1em;
 }
 
 .nav-search {
@@ -169,7 +172,7 @@ $submenu-color: darken($color-grey-1, 5%);
         cursor: pointer;
         border: 1px solid darken($color-grey-2, 10%);
         background-color: darken($color-grey-2, 15%);
-        color: #aaa;
+        color: $color-menu-text;
         padding: 0.8em 2.5em 0.8em 1em;
 
         &:hover {
@@ -352,7 +355,7 @@ body.explorer-open {
             font-weight: 500;
             text-transform: none;
             text-align: center;
-            color: #aaa;
+            color: $color-menu-text;
 
             &:before {
                 font-size: 4em;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss

@@ -81,7 +81,7 @@ dl {
 }
 
 dt {
-    color: darken($color-grey-3, 5%);
+    color: darken($color-grey-3, 15%);
     text-transform: uppercase;
     font-size: 0.9em;
 }

wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -85,6 +85,7 @@
     > h2 {
         -webkit-font-smoothing: auto;
         background: $color-salmon-light;
+        color: #200200;
         text-transform: uppercase;
         padding: 0.9em 0 0.9em 4.1em;
         font-size: 0.95em;