diff --git a/src/app/core/configurable-enum/display-configurable-enum/display-configurable-enum.component.spec.ts b/src/app/core/configurable-enum/display-configurable-enum/display-configurable-enum.component.spec.ts
index 8b8540b635..d689e5ec38 100644
--- a/src/app/core/configurable-enum/display-configurable-enum/display-configurable-enum.component.spec.ts
+++ b/src/app/core/configurable-enum/display-configurable-enum/display-configurable-enum.component.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { DisplayConfigurableEnumComponent } from "./display-configurable-enum.component";
+import { ConfigurableEnumValue } from "../configurable-enum.interface";
+import { Note } from "../../../child-dev-project/notes/model/note";
 
 describe("DisplayConfigurableEnumComponent", () => {
   let component: DisplayConfigurableEnumComponent;
   let fixture: ComponentFixture<DisplayConfigurableEnumComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [DisplayConfigurableEnumComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DisplayConfigurableEnumComponent],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DisplayConfigurableEnumComponent);
@@ -27,4 +27,23 @@ describe("DisplayConfigurableEnumComponent", () => {
   it("displays value's label", () => {
     expect(fixture.debugElement.nativeElement.innerHTML).toBe("Test Category");
   });
+
+  it("should use the background color is available", () => {
+    const elem = fixture.debugElement.nativeElement;
+    expect(elem.style["background-color"]).toBe("");
+
+    const value: ConfigurableEnumValue = {
+      label: "withColor",
+      id: "WITH_COLOR",
+      color: "black",
+    };
+    const entity = new Note();
+    entity.warningLevel = value;
+    component.onInitFromDynamicConfig({ id: "warningLevel", entity, value });
+    fixture.detectChanges();
+
+    expect(elem.style["background-color"]).toBe("black");
+    expect(elem.style.padding).toBe("5px");
+    expect(elem.style["border-radius"]).toBe("4px");
+  });
 });
diff --git a/src/app/core/configurable-enum/display-configurable-enum/display-configurable-enum.component.ts b/src/app/core/configurable-enum/display-configurable-enum/display-configurable-enum.component.ts
index 267a32406d..6700a0b7ab 100644
--- a/src/app/core/configurable-enum/display-configurable-enum/display-configurable-enum.component.ts
+++ b/src/app/core/configurable-enum/display-configurable-enum/display-configurable-enum.component.ts
@@ -1,14 +1,29 @@
-import { Component } from "@angular/core";
+import { Component, HostBinding } from "@angular/core";
+import { ViewPropertyConfig } from "app/core/entity-components/entity-list/EntityListConfig";
 import { ViewDirective } from "../../entity-components/entity-utils/view-components/view.directive";
 import { DynamicComponent } from "../../view/dynamic-components/dynamic-component.decorator";
 import { ConfigurableEnumValue } from "../configurable-enum.interface";
 
 /**
- * This component displays a text attribute.
+ * This component displays a {@link ConfigurableEnumValue} as text.
+ * If the value has a `color` property, it is used as the background color.
  */
 @DynamicComponent("DisplayConfigurableEnum")
 @Component({
   selector: "app-display-configurable-enum",
   template: `{{ value?.label }}`,
 })
-export class DisplayConfigurableEnumComponent extends ViewDirective<ConfigurableEnumValue> {}
+export class DisplayConfigurableEnumComponent extends ViewDirective<ConfigurableEnumValue> {
+  @HostBinding("style.background-color") private style;
+  @HostBinding("style.padding") private padding;
+  @HostBinding("style.border-radius") private radius;
+
+  onInitFromDynamicConfig(config: ViewPropertyConfig) {
+    super.onInitFromDynamicConfig(config);
+    if (this.value.color) {
+      this.style = this.value.color;
+      this.padding = "5px";
+      this.radius = "4px";
+    }
+  }
+}
diff --git a/src/app/features/historical-data/model/rating-answers.ts b/src/app/features/historical-data/model/rating-answers.ts
index 7e6483405f..4878274a7e 100644
--- a/src/app/features/historical-data/model/rating-answers.ts
+++ b/src/app/features/historical-data/model/rating-answers.ts
@@ -1,24 +1,29 @@
 import { Ordering } from '../../../core/configurable-enum/configurable-enum-ordering';
 
 export const ratingAnswers = Ordering.imposeTotalOrdering([
-  {
-    id: "noAnswerPossible",
-    label: $localize`:Rating answer:N/A`,
-  },
   {
     id: "notTrueAtAll",
     label: $localize`:Rating answer:not at all`,
+    color: 'rgba(253, 114, 114, 0.5)',
   },
   {
     id: "rarelyTrue",
     label: $localize`:Rating answer:rarely`,
+    color: 'rgba(255, 165, 0, 0.5)',
   },
   {
     id: "usuallyTrue",
     label: $localize`:Rating answer:usually`,
+    color: 'rgba(255, 242, 0, 0.5)',
   },
   {
     id: "absolutelyTrue",
     label: $localize`:Rating answer:absolutely`,
-  }
+    color: 'rgba(144, 238, 144, 0.5)',
+  },
+  {
+    id: "noAnswerPossible",
+    label: $localize`:Rating answer:N/A`,
+    color: '#b0b0b0',
+  },
 ]);