'Prefers-contrast' admin theming (#12348)

Co-authored-by: Victoria Ottah <82820329+Toriasdesign@users.noreply.github.com>
2024-10-17 10:13:22 +02:00 · 2024-10-17 10:13:22 +02:00 · 488c3583b7
commit 488c3583b7
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@ -20,8 +20,9 @@ Changelog
 * Fire `copy_for_translation_done` signal when copying translatable models as well as pages (Coen van der Kamp)
 * Add support for an image `description` field across all images, to better support accessible image descriptions (Chiemezuo Akujobi)
 * Prompt the user about unsaved changes when editing snippets (Sage Abdullah)
- * Implement incremental dashboard design enhancements (Albina Starykova)
+ * Implement incremental dashboard design enhancements (Albina Starykova, Ben Enright)
 * Add support for specifying different preview modes to the "View draft" URL for pages (Robin Varghese)
+ * Add a new enhanced contrast admin theming option for the admin interface (Albina Starykova, Victoria Ottah)
 * Fix: Prevent page type business rules from blocking reordering of pages (Andy Babic, Sage Abdullah)
 * Fix: Improve layout of object permissions table (Sage Abdullah)
 * Fix: Fix typo in aria-label attribute of page explorer navigation link (Sébastien Corbin)
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@ -840,6 +840,7 @@
 * Gabriel Getzie
 * Rohit Singh
 * Robin Varghese
+* Victoria Ottah

 ## Translators

--- a/client/scss/components/_a11y-result.scss
+++ b/client/scss/components/_a11y-result.scss
@ -8,6 +8,10 @@
  .form-side--checks & {
    display: block;
  }
+
+  @include more-contrast() {
+    border-color: theme('colors.border-furniture-more-contrast');
+  }
 }

 .w-a11y-result__header {
--- a/client/scss/components/_button.scss
+++ b/client/scss/components/_button.scss
@ -321,11 +321,13 @@
 }

 .w-header-button {
+  @include more-contrast-interactive();
  display: flex;
  align-items: center;
  justify-content: center;
  gap: theme('spacing.1');
-  height: theme('spacing.7');
+  height: theme('spacing.8');
+  min-width: theme('spacing.8');
  appearance: none;
  background-color: initial;
  border: 1px solid transparent;
--- a/client/scss/components/_chooser.scss
+++ b/client/scss/components/_chooser.scss
@ -15,6 +15,7 @@ $preview-size: 2.625rem; // 42px
 // Very subdued button style specifically for choosers, as there can be a lot of
 // chooser fields left unused on a page editing form.
 .button.chooser__choose-button {
+  @include more-contrast-interactive();
  @apply w-label-3;
  display: flex;
  align-items: center;
@ -81,11 +82,6 @@ $preview-size: 2.625rem; // 42px
  width: auto;
 }

-.chooser .w-dropdown__toggle--icon {
-  width: $preview-size;
-  height: $preview-size;
-}
-
 // Display these as inline block so that action icons such as comments can appear as close as possible
 .w-field--admin_task_chooser,
 .w-field--admin_page_chooser,
--- a/client/scss/components/_dropdown.scss
+++ b/client/scss/components/_dropdown.scss
@ -3,7 +3,7 @@
 }

 .w-dropdown__toggle--icon {
-  @apply w-w-8 w-h-8;
+  @apply w-w-8 w-h-8 more-contrast:w-p-0 more-contrast:w-border more-contrast:w-rounded-sm more-contrast:w-border-border-interactive-more-contrast hover:more-contrast:w-border-border-interactive-more-contrast-hover;
 }

 .w-dropdown__toggle-icon {
--- a/client/scss/components/_filters.scss
+++ b/client/scss/components/_filters.scss
@ -25,6 +25,7 @@
 }

 .w-filter-button {
+  @include more-contrast-interactive();
  position: relative;
  width: theme('spacing.10');
  height: theme('spacing.10');
--- a/client/scss/components/_form-side.scss
+++ b/client/scss/components/_form-side.scss
@ -36,7 +36,8 @@
      sm:w-max-w-[22.5rem]
      md:w-max-w-[35.937rem]
      lg:w-max-w-[31.25rem]
-      xl:w-max-w-[46.875rem];
+      xl:w-max-w-[46.875rem]
+      more-contrast:w-border-border-furniture-more-contrast;
  z-index: calc(theme('zIndex.header') - 10);
  width: var(--side-panel-width, 100%);

--- a/client/scss/components/_header.scss
+++ b/client/scss/components/_header.scss
@ -151,6 +151,10 @@
 }

 .w-slim-header {
+  @include more-contrast() {
+    border-color: theme('colors.border-furniture-more-contrast');
+  }
+
  &__search-form {
    @apply w-mx-2 w-flex w-items-center w-gap-2;
  }
--- a/client/scss/components/_messages.scss
+++ b/client/scss/components/_messages.scss
@ -58,6 +58,10 @@
  .warning {
    background-color: theme('colors.warning.100');
    color: theme('colors.grey.600');
+
+    @include more-contrast() {
+      background-color: theme('colors.warning.75');
+    }
  }

  .info {
--- a/client/scss/components/_panel.scss
+++ b/client/scss/components/_panel.scss
@ -61,6 +61,7 @@ $header-button-size: theme('spacing.6');
 .w-panel__toggle,
 .w-panel__controls .button.button--icon {
  @include show-focus-outline-inside();
+  @include more-contrast-interactive();
  display: inline-grid;
  justify-content: center;
  align-content: center;
--- a/client/scss/components/_preview-panel.scss
+++ b/client/scss/components/_preview-panel.scss
@ -59,6 +59,10 @@
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
+
+    @include more-contrast() {
+      border-color: theme('colors.border-furniture-more-contrast');
+    }
  }

  &__size-button {
--- a/client/scss/components/forms/_input-base.scss
+++ b/client/scss/components/forms/_input-base.scss
@ -3,6 +3,7 @@
 * Text input, textarea, checkbox, radio, select, etc.
 */
@mixin input-base() {
+  @include more-contrast-interactive();
  appearance: none;
  border-radius: theme('borderRadius.DEFAULT');
  color: theme('colors.text-context');
--- a/client/scss/tools/_mixins.general.scss
+++ b/client/scss/tools/_mixins.general.scss
@ -93,6 +93,21 @@
  }
 }

+/**
+ * Apply styles for enhanced contrast theming.
+ */
+@mixin more-contrast() {
+  .w-contrast-more & {
+    @content;
+  }
+
+  @media (prefers-contrast: more) {
+    .w-contrast-system & {
+      @content;
+    }
+  }
+}
+
 /**
 * Apply styles for the light theme only.
 */
@ -107,3 +122,48 @@
    }
  }
 }
+
+/**
+ * Apply styles for the dark theme with increased contrast.
+ */
+@mixin dark-theme-more-contrast() {
+  .w-theme-dark.w-contrast-more & {
+    @content;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .w-theme-system.w-contrast-more & {
+      @content;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .w-theme-dark.w-contrast-system & {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
+    .w-theme-system.w-contrast-system & {
+      @content;
+    }
+  }
+}
+
+/**
+* Increased contrast theme styles for interactive components
+*/
+@mixin more-contrast-interactive() {
+  @include more-contrast() {
+    border: 1px solid theme('colors.border-interactive-more-contrast');
+
+    &:hover {
+      border-color: theme('colors.border-interactive-more-contrast-hover');
+    }
+
+    &[disabled],
+    &[disabled]:hover {
+      border-style: dashed;
+    }
+  }
+}
--- a/client/src/components/CommentApp/components/Comment/style.scss
+++ b/client/src/components/CommentApp/components/Comment/style.scss
@ -1,5 +1,6 @@
 .comment {
  @include box;
+  @include more-contrast-interactive();

  width: 300px;
  display: block;
--- a/client/src/components/CommentApp/components/CommentHeader/style.scss
+++ b/client/src/components/CommentApp/components/CommentHeader/style.scss
@ -40,6 +40,8 @@

    > button,
    > details > summary {
+      @include more-contrast-interactive();
+      border-radius: theme('borderRadius.sm');
      list-style-type: none; // Hides triangle on Firefox
      width: 30px;
      height: 30px;
--- a/client/src/components/Draftail/Draftail.scss
+++ b/client/src/components/Draftail/Draftail.scss
@ -101,6 +101,11 @@ $draftail-editor-font-family: theme('fontFamily.sans');
  background-color: $draftail-editor-background;
  color: $draftail-placeholder-text;

+  &--pin {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
  .Draftail-Editor--focus & {
    color: $draftail-editor-text;
    top: calc(theme('spacing.slim-header') * 2);
@ -205,11 +210,19 @@ $draftail-editor-font-family: theme('fontFamily.sans');
  }
 }

+.Draftail-ToolbarGroup {
+  display: flex;
+}
+
 .Draftail-ToolbarGroup::before {
  display: none;
 }

 .Draftail-ToolbarButton {
+  @include more-contrast-interactive();
+  display: flex;
+  align-items: center;
+  justify-content: center;
  height: 1.875rem;
  min-width: 1.875rem;
  padding: 0;
@ -257,6 +270,7 @@ $draftail-editor-font-family: theme('fontFamily.sans');
  .Draftail-Toolbar & {
    border-color: theme('colors.border-field-default');
    background-color: theme('colors.surface-page');
+    color: currentColor;
    border-top-width: 0;
    border-inline-end-width: 0;

--- a/client/src/components/Minimap/CollapseAll.scss
+++ b/client/src/components/Minimap/CollapseAll.scss
@ -1,4 +1,5 @@
 .w-minimap__collapse-all {
+  @include more-contrast-interactive();
  display: none;
  // Keep the icon at a stable position and reduce the amount of shifting of the button.
  min-width: 110px;
--- a/client/src/components/Minimap/MinimapItem.scss
+++ b/client/src/components/Minimap/MinimapItem.scss
@ -35,6 +35,10 @@
    @media (forced-colors: active) {
      border-inline-start-width: 3px;
    }
+
+    @include more-contrast() {
+      border-inline-start-width: 3px;
+    }
  }

  &:hover {
--- a/client/src/components/Sidebar/Sidebar.scss
+++ b/client/src/components/Sidebar/Sidebar.scss
@ -45,6 +45,9 @@ $sidebar-toggle-size: 35px;
  @media (forced-colors: active) {
    border-inline-end: 1px solid transparent;
  }
+  @include dark-theme-more-contrast() {
+    border-inline-end: 1px solid theme('colors.border-furniture-more-contrast');
+  }

  .icon--menuitem {
    width: 1rem;
--- a/client/src/components/Sidebar/Sidebar.tsx
+++ b/client/src/components/Sidebar/Sidebar.tsx
@ -230,7 +230,9 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
                w-items-center
                hover:w-bg-surface-menu-item-active
                hover:text-white
-                hover:opacity-100`}
+                hover:opacity-100
+                more-contrast:w-border-border-interactive-more-contrast-dark-bg
+                hover:more-contrast:w-border-border-interactive-more-contrast-dark-bg-hover`}
            >
              <Icon
                name="expand-right"
--- a/client/src/components/Sidebar/snapshots/Sidebar.test.js.snap
+++ b/client/src/components/Sidebar/snapshots/Sidebar.test.js.snap
@ -35,7 +35,9 @@ exports[`Sidebar should render with the minimum required props 1`] = `
                w-items-center
                hover:w-bg-surface-menu-item-active
                hover:text-white
-                hover:opacity-100"
+                hover:opacity-100
+                more-contrast:w-border-border-interactive-more-contrast-dark-bg
+                hover:more-contrast:w-border-border-interactive-more-contrast-dark-bg-hover"
          onClick={[Function]}
          type="button"
        >
--- a/client/src/tokens/colorThemes.js
+++ b/client/src/tokens/colorThemes.js
@ -295,6 +295,36 @@ const light = [
        textUtility: 'w-text-border-button-outline-hover',
        cssVariable: '--w-color-border-button-outline-hover',
      },
+      'border-interactive-more-contrast': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-border-interactive-more-contrast',
+        textUtility: 'w-text-border-interactive-more-contrast',
+        cssVariable: '--w-color-border-interactive-more-contrast',
+      },
+      'border-interactive-more-contrast-hover': {
+        value: 'var(--w-color-black)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-hover',
+        textUtility: 'w-text-border-interactive-more-contrast-hover',
+        cssVariable: '--w-color-border-interactive-more-contrast-hover',
+      },
+      'border-interactive-more-contrast-dark-bg': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg',
+        textUtility: 'w-text-border-interactive-more-contrast-dark-bg',
+        cssVariable: '--w-color-border-interactive-more-contrast-dark-bg',
+      },
+      'border-interactive-more-contrast-dark-bg-hover': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg-hover',
+        textUtility: 'w-text-border-interactive-more-contrast-dark-bg-hover',
+        cssVariable: '--w-color-border-interactive-more-contrast-dark-bg-hover',
+      },
+      'border-furniture-more-contrast': {
+        value: 'var(--w-color-grey-200)',
+        bgUtility: 'w-bg-border-furniture-more-contrast',
+        textUtility: 'w-text-border-furniture-more-contrast',
+        cssVariable: '--w-color-border-furniture-more-contrast',
+      },
    },
  },
  {
@ -583,6 +613,36 @@ const dark = [
        textUtility: 'w-text-border-button-outline-hover',
        cssVariable: '--w-color-border-button-outline-hover',
      },
+      'border-interactive-more-contrast': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-interactive-more-contrast',
+        textUtility: 'w-text-border-interactive-more-contrast',
+        cssVariable: '--w-color-border-interactive-more-contrast',
+      },
+      'border-interactive-more-contrast-hover': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-hover',
+        textUtility: 'w-text-border-interactive-more-contrast-hover',
+        cssVariable: '--w-color-border-interactive-more-contrast-hover',
+      },
+      'border-interactive-more-contrast-dark-bg': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg',
+        textUtility: 'w-text-border-interactive-more-contrast-dark-bg',
+        cssVariable: '--w-color-border-interactive-more-contrast-dark-bg',
+      },
+      'border-interactive-more-contrast-dark-bg-hover': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg-hover',
+        textUtility: 'w-text-border-interactive-more-contrast-dark-bg-hover',
+        cssVariable: '--w-color-border-interactive-more-contrast-dark-bg-hover',
+      },
+      'border-furniture-more-contrast': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-border-furniture-more-contrast',
+        textUtility: 'w-text-border-furniture-more-contrast',
+        cssVariable: '--w-color-border-furniture-more-contrast',
+      },
    },
  },
  {
--- a/client/src/tokens/colorVariables.test.js
+++ b/client/src/tokens/colorVariables.test.js
@ -143,6 +143,10 @@ describe('generateColorVariables', () => {
        "--w-color-warning-50-hue": "calc(var(--w-color-warning-100-hue) - 2.3)",
        "--w-color-warning-50-lightness": "calc(var(--w-color-warning-100-lightness) + 41.8%)",
        "--w-color-warning-50-saturation": "calc(var(--w-color-warning-100-saturation) - 21.3%)",
+        "--w-color-warning-75": "hsl(var(--w-color-warning-75-hue) var(--w-color-warning-75-saturation) var(--w-color-warning-75-lightness))",
+        "--w-color-warning-75-hue": "calc(var(--w-color-warning-100-hue) + 0.7)",
+        "--w-color-warning-75-lightness": "calc(var(--w-color-warning-100-lightness) + 23.4%)",
+        "--w-color-warning-75-saturation": "calc(var(--w-color-warning-100-saturation) - 2.8%)",
        "--w-color-white": "hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness))",
        "--w-color-white-hue": "0",
        "--w-color-white-lightness": "100%",
@ -200,6 +204,11 @@ describe('generateThemeColorVariables', () => {
        "--w-color-border-field-hover": "var(--w-color-grey-200)",
        "--w-color-border-field-inactive": "var(--w-color-grey-150)",
        "--w-color-border-furniture": "var(--w-color-grey-100)",
+        "--w-color-border-furniture-more-contrast": "var(--w-color-grey-200)",
+        "--w-color-border-interactive-more-contrast": "var(--w-color-grey-500)",
+        "--w-color-border-interactive-more-contrast-dark-bg": "var(--w-color-grey-150)",
+        "--w-color-border-interactive-more-contrast-dark-bg-hover": "var(--w-color-white)",
+        "--w-color-border-interactive-more-contrast-hover": "var(--w-color-black)",
        "--w-color-box-shadow-md": "var(--w-color-black-25)",
        "--w-color-focus": "#00A885",
        "--w-color-icon-primary": "var(--w-color-primary)",
@ -252,6 +261,11 @@ describe('generateThemeColorVariables', () => {
        "--w-color-border-field-hover": "var(--w-color-grey-200)",
        "--w-color-border-field-inactive": "var(--w-color-grey-500)",
        "--w-color-border-furniture": "var(--w-color-grey-500)",
+        "--w-color-border-furniture-more-contrast": "var(--w-color-grey-400)",
+        "--w-color-border-interactive-more-contrast": "var(--w-color-grey-150)",
+        "--w-color-border-interactive-more-contrast-dark-bg": "var(--w-color-grey-150)",
+        "--w-color-border-interactive-more-contrast-dark-bg-hover": "var(--w-color-white)",
+        "--w-color-border-interactive-more-contrast-hover": "var(--w-color-white)",
        "--w-color-box-shadow-md": "var(--w-color-black-50)",
        "--w-color-focus": "#00A885",
        "--w-color-icon-primary": "var(--w-color-grey-150)",
--- a/client/src/tokens/colors.js
+++ b/client/src/tokens/colors.js
@ -268,6 +268,16 @@ const staticColors = {
      usage: 'Background and icons for potentially dangerous states',
      contrastText: 'primary',
    },
+    75: {
+      hex: '#FDD074',
+      hsl: 'hsl(40.3, 97.2%, 72.4%)',
+      bgUtility: 'w-bg-warning-75',
+      textUtility: 'w-text-warning-75',
+      cssVariable: '--w-color-warning-75',
+      usage:
+        'Background only, for potentially dangerous states, in enhanced-contrast theme',
+      contrastText: 'primary',
+    },
    50: {
      hex: '#FFF5D8',
      hsl: 'hsl(37.3 78.7% 90.8%)',
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@ -190,6 +190,13 @@ module.exports = {
    plugin(({ addVariant }) => {
      addVariant('expanded', '&[aria-expanded=true]');
    }),
+    /** Support for increased contrast theme */
+    plugin(({ addVariant }) => {
+      addVariant('more-contrast', [
+        '.contrast-more &',
+        '@media (prefers-contrast: more) { .contrast-system & }',
+      ]);
+    }),
  ],
  corePlugins: {
    ...vanillaRTL.disabledCorePlugins,
--- a/docs/releases/6.3.md
+++ b/docs/releases/6.3.md
@ -25,6 +25,13 @@ The Wagtail dashboard design evolves towards providing more information and navi

 This feature was developed by Albina Starykova based on designs by Ben Enright.

+### Enhanced contrast admin theme
+
+CMS users can now control the level of contrast of UI elements in the admin interface.
+This new customization is designed for partially sighted users, complementing existing support for a dark theme and Windows Contrast Themes.
+The new "More contrast" theming can be enabled in account preferences, or will otherwise be derived from operating system preferences.
+
+This feature was designed thanks to feedback from our blind and partially sighted users, and was developed by Albina Starykova based on design input from Victoria Ottah.

 ### Other features

--- a/wagtail/admin/forms/account.py
+++ b/wagtail/admin/forms/account.py
@ -140,4 +140,4 @@ class AvatarPreferencesForm(forms.ModelForm):
 class ThemePreferencesForm(forms.ModelForm):
    class Meta:
        model = UserProfile
-        fields = ["theme", "density"]
+        fields = ["theme", "contrast", "density"]
--- a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html
@ -2,7 +2,7 @@

 {% trans "Actions" as title %}
 <nav aria-label="{{ title }}">
-    {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=title toggle_classname="w-p-0 w-w-8 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
+    {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=title toggle_classname="w-p-0 w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
        {% block content %}
            {% include "wagtailadmin/pages/listing/_dropdown_items.html" with buttons=buttons only %}
        {% endblock %}
--- a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
@ -19,7 +19,7 @@

 {% endcomment %}
 {% fragment as nav_icon_classes %}w-w-4 w-h-4 group-hover:w-transform group-hover:w-scale-110{% endfragment %}
-{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current w-shrink-0{% endfragment %}
+{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current w-shrink-0 more-contrast:w-border more-contrast:w-border-border-interactive-more-contrast hover:more-contrast:w-border-border-interactive-more-contrast-hover{% endfragment %}
 {% fragment as nav_icon_counter_classes %}-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-text-text-button w-border w-border-surface-page w-rounded-[1rem]{% endfragment %}
 {# Z index 99 to ensure header is always above  #}
 <div class="w-sticky w-top-0 w-z-header">
--- a/wagtail/admin/templates/wagtailadmin/shared/page_status_tag_new.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/page_status_tag_new.html
@ -31,7 +31,10 @@
              w-font-semibold
              hover:w-border-surface-menus
              hover:w-text-text-label
-              w-transition"
+              w-transition
+              more-contrast:w-border
+              more-contrast:w-border-border-interactive-more-contrast
+              hover:more-contrast:w-border-border-interactive-more-contrast-hover"
       aria-label="{% if is_public %}{% trans 'Visible to all. Visit the live page' %}{% else %}{% trans 'Private. Visit the live page' %}{% endif %}"
       data-controller="w-tooltip"
       data-w-tooltip-content-value="{% if is_public %}{% trans 'Visible to all' %}{% else %}{% trans 'Private' %}{% endif %}"
--- a/wagtail/admin/templatetags/wagtailadmin_tags.py
+++ b/wagtail/admin/templatetags/wagtailadmin_tags.py
@ -683,12 +683,18 @@ def admin_theme_classname(context):
        if hasattr(user, "wagtail_userprofile")
        else "system"
    )
+    contrast_name = (
+        user.wagtail_userprofile.contrast
+        if hasattr(user, "wagtail_userprofile")
+        else "system"
+    )
    density_name = (
        user.wagtail_userprofile.density
        if hasattr(user, "wagtail_userprofile")
        else "default"
    )
-    return f"w-theme-{theme_name} w-density-{density_name}"
+    contrast_name = contrast_name.split("_")[0]
+    return f"w-theme-{theme_name} w-density-{density_name} w-contrast-{contrast_name}"


@register.simple_tag
--- a/wagtail/admin/tests/test_account_management.py
+++ b/wagtail/admin/tests/test_account_management.py
@ -232,6 +232,7 @@ class TestAccountSectionUtilsMixin:
            "locale-current_time_zone": "Europe/London",
            "theme-theme": "dark",
            "theme-density": "default",
+            "theme-contrast": "system",
        }
        post_data.update(extra_post_data)
        return self.client.post(reverse("wagtailadmin_account"), post_data)
@ -480,7 +481,7 @@ class TestAccountSection(WagtailTestUtils, TestCase, TestAccountSectionUtilsMixi
        response = self.client.get(reverse("wagtailadmin_home"))
        self.assertContains(
            response,
-            '<html lang="es" dir="ltr" class="w-theme-dark w-density-default">',
+            '<html lang="es" dir="ltr" class="w-theme-dark w-density-default w-contrast-system">',
        )

    def test_unset_language_preferences(self):
@ -610,6 +611,21 @@ class TestAccountSection(WagtailTestUtils, TestCase, TestAccountSectionUtilsMixi

        self.assertEqual(profile.theme, "light")

+    def test_change_contrast_post(self):
+        response = self.post_form(
+            {
+                "theme-contrast": "more_contrast",
+            }
+        )
+
+        # Check that the user was redirected to the account page
+        self.assertRedirects(response, reverse("wagtailadmin_account"))
+
+        profile = UserProfile.get_for_user(self.user)
+        profile.refresh_from_db()
+
+        self.assertEqual(profile.contrast, "more_contrast")
+
    def test_change_density_post(self):
        response = self.post_form(
            {
--- a/wagtail/admin/tests/test_audit_log.py
+++ b/wagtail/admin/tests/test_audit_log.py
@ -144,8 +144,8 @@ class TestAuditLogAdmin(AdminTemplateTestUtils, WagtailTestUtils, TestCase):
        )

        self.assertContains(
-            response, "system", 3
-        )  # create without a user + remove restriction + 1 from unrelated admin color theme
+            response, "system", 4
+        )  # create without a user + remove restriction + 2 from unrelated admin color theme
        self.assertContains(
            response, "the_editor", 9
        )  # 7 entries by editor + 1 in sidebar menu + 1 in filter
--- a/wagtail/admin/tests/test_views.py
+++ b/wagtail/admin/tests/test_views.py
@ -81,7 +81,7 @@ class TestLoginView(WagtailTestUtils, TestCase):
        response = self.client.get(reverse("wagtailadmin_login"))
        self.assertContains(
            response,
-            '<html lang="de" dir="ltr" class="w-theme-system w-density-default">',
+            '<html lang="de" dir="ltr" class="w-theme-system w-density-default w-contrast-system">',
        )

    @override_settings(LANGUAGE_CODE="he")
@ -89,7 +89,7 @@ class TestLoginView(WagtailTestUtils, TestCase):
        response = self.client.get(reverse("wagtailadmin_login"))
        self.assertContains(
            response,
-            '<html lang="he" dir="rtl" class="w-theme-system w-density-default">',
+            '<html lang="he" dir="rtl" class="w-theme-system w-density-default w-contrast-system">',
        )

    @override_settings(
--- a/wagtail/users/migrations/0014_userprofile_contrast.py
+++ b/wagtail/users/migrations/0014_userprofile_contrast.py
@ -0,0 +1,23 @@
+# Generated by Django 5.0.6 on 2024-09-23 15:33
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailusers", "0013_userprofile_density"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="userprofile",
+            name="contrast",
+            field=models.CharField(
+                choices=[("system", "System default"), ("more_contrast", "More contrast")],
+                default="system",
+                max_length=40,
+                verbose_name="contrast",
+            ),
+        ),
+    ]
--- a/wagtail/users/models.py
+++ b/wagtail/users/models.py
@ -84,6 +84,17 @@ class UserProfile(models.Model):
        max_length=40,
    )

+    class AdminContrastThemes(models.TextChoices):
+        SYSTEM = "system", _("System default")
+        MORE_CONTRAST = "more_contrast", _("More contrast")
+
+    contrast = models.CharField(
+        verbose_name=_("contrast"),
+        choices=AdminContrastThemes.choices,
+        default=AdminContrastThemes.SYSTEM,
+        max_length=40,
+    )
+
    class AdminDensityThemes(models.TextChoices):
        DEFAULT = "default", _("Default")
        SNUG = "snug", _("Snug")