diff --git a/gradle/changelog/high_contrast_colors.yaml b/gradle/changelog/high_contrast_colors.yaml
new file mode 100644
index 0000000000..c30c03ed94
--- /dev/null
+++ b/gradle/changelog/high_contrast_colors.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: Additional color scheme to prepare a high contrast mode ([#1730](https://github.com/scm-manager/scm-manager/pull/1731))
diff --git a/scm-ui/ui-styles/public/index.html b/scm-ui/ui-styles/public/index.html
index de869ef1dc..4380b85b5f 100644
--- a/scm-ui/ui-styles/public/index.html
+++ b/scm-ui/ui-styles/public/index.html
@@ -249,6 +249,174 @@
       </tbody>
     </table>
     <br>
+    <table class="table is-bordered high-contrast">
+      <thead>
+      <tr>
+        <th> Class</th>
+        <th> Color (100%)</th>
+        <th> Color (75%)</th>
+        <th> Color (50%)</th>
+        <th> Color (25%)</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td><code>.has-background-dark</code><br>
+          <code>.has-background-dark-75</code><br>
+          <code>.has-background-dark-50</code><br>
+          <code>.has-background-dark-25</code></td>
+        <td><span class="button has-background-high-contrast-light-gray">&nbsp</span> <br>
+          <br>
+          #f2f2f2
+        </td>
+        <td><span class="button has-background-high-contrast-light-gray-75">&nbsp</span> <br>
+          <br>
+          #cccccc
+        </td>
+        <td><span class="button has-background-high-contrast-light-gray-50">&nbsp</span> <br>
+          <br>
+          #a6a6a6
+        </td>
+        <td><span class="button has-background-high-contrast-light-gray-25">&nbsp</span> <br>
+          <br>
+          #7f7f7f
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-info</code><br>
+          <code>.has-background-info-75</code><br>
+          <code>.has-background-info-50</code><br>
+          <code>.has-background-info-25</code></td>
+        <td><span class="button has-background-info">&nbsp</span> <br>
+          <br>
+          #33b2e8
+        </td>
+        <td><span class="button has-background-info-75">&nbsp</span> <br>
+          <br>
+          #66c5ee
+        </td>
+        <td><span class="button has-background-info-50">&nbsp</span> <br>
+          <br>
+          #99d8f3
+        </td>
+        <td><span class="button has-background-info-25">&nbsp</span> <br>
+          <br>
+          #ccecf9
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-link</code><br>
+          <code>.has-background-link-75</code><br>
+          <code>.has-background-link-50</code><br>
+          <code>.has-background-link-25</code></td>
+        <td><span class="button has-background-link">&nbsp</span> <br>
+          <br>
+          #33b2e8
+        </td>
+        <td><span class="button has-background-link-75">&nbsp</span> <br>
+          <br>
+          #66c5ee
+        </td>
+        <td><span class="button has-background-link-50">&nbsp</span> <br>
+          <br>
+          #99d8f3
+        </td>
+        <td><span class="button has-background-link-25">&nbsp</span> <br>
+          <br>
+          #ccecf9
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-primary</code><br>
+          <code>.has-background-primary-75</code><br>
+          <code>.has-background-primary-50</code><br>
+          <code>.has-background-primary-25</code></td>
+        <td><span class="button has-background-primary">&nbsp</span> <br>
+          <br>
+          #00d1df
+        </td>
+        <td><span class="button has-background-primary-75">&nbsp</span> <br>
+          <br>
+          #40dde7
+        </td>
+        <td><span class="button has-background-primary-50">&nbsp</span> <br>
+          <br>
+          #7fe8ef
+        </td>
+        <td><span class="button has-background-primary-25">&nbsp</span> <br>
+          <br>
+          #bff3f7
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-success</code><br>
+          <code>.has-background-success-75</code><br>
+          <code>.has-background-success-50</code><br>
+          <code>.has-background-success-25</code></td>
+        <td><span class="button has-background-success">&nbsp</span> <br>
+          <br>
+          #00c79b
+        </td>
+        <td><span class="button has-background-success-75">&nbsp</span> <br>
+          <br>
+          #40d5b4
+        </td>
+        <td><span class="button has-background-success-50">&nbsp</span> <br>
+          <br>
+          #7fe3cd
+        </td>
+        <td><span class="button has-background-success-25">&nbsp</span> <br>
+          <br>
+          #bff1e6
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-warning</code><br>
+          <code>.has-background-warning-75</code><br>
+          <code>.has-background-warning-50</code><br>
+          <code>.has-background-warning-25</code></td>
+        <td><span class="button has-background-warning">&nbsp</span> <br>
+          <br>
+          #ffdd57
+        </td>
+        <td><span class="button has-background-warning-75">&nbsp</span> <br>
+          <br>
+          #ffe681
+        </td>
+        <td><span class="button has-background-warning-50">&nbsp</span> <br>
+          <br>
+          #ffeeab
+        </td>
+        <td><span class="button has-background-warning-25">&nbsp</span> <br>
+          <br>
+          #fff6d5
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-danger-high-contrast</code><br>
+          <code>.has-background-danger-high-contrast-75</code><br>
+          <code>.has-background-danger-high-contrast-50</code><br>
+          <code>.has-background-danger-high-contrast-25</code></td>
+        <td><span class="button has-background-danger-high-contrast">&nbsp</span> <br>
+          <br>
+          #e63453
+        </td>
+        <td><span class="button has-background-danger-high-contrast-75">&nbsp</span> <br>
+          <br>
+          #ec677e
+        </td>
+        <td><span class="button has-background-danger-high-contrast-50">&nbsp</span> <br>
+          <br>
+          #f39aa9
+        </td>
+        <td><span class="button has-background-danger-high-contrast-25">&nbsp</span> <br>
+          <br>
+          #f9ccd4
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <br>
     <table class="table is-bordered">
       <thead>
       <tr>
@@ -288,6 +456,46 @@
       </tr>
       </tbody>
     </table>
+    <br>
+    <table class="table is-bordered high-contrast">
+      <thead>
+      <tr>
+        <th> Class</th>
+        <th> Text</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td><code>.has-text-high-contrast-light-gray </code><br></td>
+        <td><span class="has-text-high-contrast-light-gray ">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-info</code><br></td>
+        <td><span class="has-text-info">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-link</code><br></td>
+        <td><span class="has-text-link">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-primary</code><br></td>
+        <td><span class="has-text-primary">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-success</code><br></td>
+        <td><span class="has-text-success">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-high-contrast-warning</code>
+        </td>
+        <td><span class="has-text-high-contrast-warning">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-high-contrast-danger</code><span class="tag is-light">Attention: Danger-text is lighter shade #f39aa9</span><br></td>
+        <td><span class="has-text-high-contrast-danger">Beispieltext</span></td>
+      </tr>
+      </tbody>
+    </table>
   </div>
 </section>
 <section class="section" id="layout">
diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss
index 896106a8f1..0a9ef65e0c 100644
--- a/scm-ui/ui-styles/src/scm.scss
+++ b/scm-ui/ui-styles/src/scm.scss
@@ -23,13 +23,24 @@
  */
 @import "bulma/sass/utilities/initial-variables";
 @import "bulma/sass/utilities/functions";
-
+//$link: #007EB0;
+$info: #33b2e8;
 $turquoise: #00d1df;
 $blue: #33b2e8;
 $cyan: $blue;
 $green: #00c79b;
+$warning: #ffdd57;
 $blue-light: #98d8f3;
+$danger: #ff3860;
+$high-contrast-danger: #e63453;
 $family-monospace: "Courier New", Monaco, Menlo, "Ubuntu Mono", "source-code-pro", monospace;
+$high-contrast-background-color: #050514;
+$high-contrast-light-gray: #f2f2f2;
+
+.table.high-contrast, .table.high-contrast thead td, .table.high-contrast thead th {
+  background-color: $high-contrast-background-color;
+  color: $high-contrast-light-gray;
+}
 
 .is-ellipsis-overflow {
   overflow: hidden;
@@ -92,7 +103,7 @@ footer.footer {
   padding: inherit;
 
   a {
-    color: darken($blue, 15%);
+    color: darken($info, 15%);
   }
 }
 
@@ -122,6 +133,14 @@ $danger-75: scale-color($danger, $lightness: 25%);
 $danger-50: scale-color($danger, $lightness: 50%);
 $danger-25: scale-color($danger, $lightness: 75%);
 
+$high-contrast-danger-75: scale-color($high-contrast-danger, $lightness: 25%);
+$high-contrast-danger-50: scale-color($high-contrast-danger, $lightness: 50%);
+$high-contrast-danger-25: scale-color($high-contrast-danger, $lightness: 75%);
+
+//high-contrast light gray
+$light-75: darken($high-contrast-light-gray, 15%);
+$light-50: darken($high-contrast-light-gray, 30%);
+$light-25: darken($high-contrast-light-gray, 45%);
 /*
 // not supported by ie
 // css vars for external reuse
@@ -178,6 +197,17 @@ $danger-25: scale-color($danger, $lightness: 75%);
   color: $blue-light !important;
 }
 
+.has-text-high-contrast-warning {
+  color: $warning;
+}
+.has-text-high-contrast-danger{
+  color: $high-contrast-danger-50;
+}
+.has-text-high-contrast-light-gray {
+  color: $high-contrast-light-gray;
+}
+
+
 // border and background colors
 .has-background-dark-75 {
   background-color: $dark-75;
@@ -243,10 +273,36 @@ $danger-25: scale-color($danger, $lightness: 75%);
   background-color: $danger-25;
 }
 
+.has-background-danger-high-contrast {
+  background-color: $high-contrast-danger;
+}
+.has-background-danger-high-contrast-75 {
+  background-color: $high-contrast-danger-75;
+}
+.has-background-danger-high-contrast-50 {
+  background-color: $high-contrast-danger-50;
+}
+.has-background-danger-high-contrast-25 {
+  background-color: $high-contrast-danger-25;
+}
+
 .has-background-blue-light {
   background-color: $blue-light;
 }
 
+.has-background-high-contrast-light-gray {
+  background-color: $high-contrast-light-gray;
+}
+.has-background-high-contrast-light-gray-75 {
+  background-color: $light-75;
+}
+.has-background-high-contrast-light-gray-50 {
+  background-color: $light-50;
+}
+.has-background-high-contrast-light-gray-25 {
+  background-color: $light-25;
+}
+
 // tags
 .tag:not(body) {
   border: 1px solid transparent;
@@ -779,7 +835,7 @@ form .field:not(.is-grouped) {
     padding: 1rem;
 
     &.is-active {
-      color: $blue;
+      color: $info;
       background-color: #fff;
     }
   }