diff --git a/packages/main/src/Avatar.js b/packages/main/src/Avatar.js
index bb328732f70f..ef35fa0da4cd 100644
--- a/packages/main/src/Avatar.js
+++ b/packages/main/src/Avatar.js
@@ -16,7 +16,7 @@ import Icon from "./Icon.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
 import AvatarFitType from "./types/AvatarFitType.js";
-import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
 /**
  * @public
@@ -150,7 +150,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the background color of the desired image.
+		 * Defines the background color of the content.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -166,21 +166,21 @@ const metadata = {
 		 * <li><code>Accent10</code></li>
 		 * <li><code>Placeholder</code></li>
 		 * </ul>
-		 * @type {AvatarBackgroundColor}
+		 * @type {AvatarColorScheme}
 		 * @defaultvalue "Accent6"
 		 * @public
 		 */
-		backgroundColor: {
-			type: AvatarBackgroundColor,
-			defaultValue: AvatarBackgroundColor.Accent6,
+		colorScheme: {
+			type: AvatarColorScheme,
+			defaultValue: AvatarColorScheme.Accent6,
 		},
 
 		/**
 		 * @private
 		 */
-		_backgroundColor: {
+		_colorScheme: {
 			type: String,
-			defaultValue: AvatarBackgroundColor.Accent6,
+			defaultValue: AvatarColorScheme.Accent6,
 		},
 
 		/**
@@ -314,7 +314,7 @@ class Avatar extends UI5Element {
 	 */
 	get _effectiveBackgroundColor() {
 		// we read the attribute, because the "background-color" property will always have a default value
-		return this.getAttribute("background-color") || this._backgroundColor;
+		return this.getAttribute("_color-scheme") || this._colorScheme;
 	}
 
 	get _role() {
diff --git a/packages/main/src/AvatarGroup.js b/packages/main/src/AvatarGroup.js
index 982c4e244205..8173a549de7c 100644
--- a/packages/main/src/AvatarGroup.js
+++ b/packages/main/src/AvatarGroup.js
@@ -25,7 +25,7 @@ import AvatarGroupCss from "./generated/themes/AvatarGroup.css.js";
 import Button from "./Button.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarGroupType from "./types/AvatarGroupType.js";
-import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
 const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn";
 const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;
@@ -309,7 +309,7 @@ class AvatarGroup extends UI5Element {
 	}
 
 	/**
-	 * Returns an array containing the <code>AvatarBackgroundColor</code> values that correspond to the avatars in the <code>ui5-avatar-group</code>.
+	 * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the <code>ui5-avatar-group</code>.
 	 * @readonly
 	 * @type { Array }
 	 * @defaultValue []
@@ -498,9 +498,9 @@ class AvatarGroup extends UI5Element {
 			const colorIndex = this._getNextBackgroundColor();
 			avatar.interactive = !this._isGroup;
 
-			if (!avatar.getAttribute("background-color")) {
+			if (!avatar.getAttribute("_color-scheme")) {
 				// AvatarGroup respects colors set to ui5-avatar
-				avatar.setAttribute("_background-color", AvatarBackgroundColor[`Accent${colorIndex}`]);
+				avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]);
 			}
 
 			if (!avatar.getAttribute("size")) {
diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css
index c535595fe872..9505e8bac002 100644
--- a/packages/main/src/themes/Avatar.css
+++ b/packages/main/src/themes/Avatar.css
@@ -119,58 +119,58 @@
 	background-color: var(--ui5-avatar-accent6);
 }
 
-:host([_background-color="Accent1"]),
-:host([background-color="Accent1"]) {
+:host([_color-scheme="Accent1"]),
+:host([color-scheme="Accent1"]) {
 	background-color: var(--ui5-avatar-accent1);
 }
 
-:host([_background-color="Accent2"]),
-:host([background-color="Accent2"]) {
+:host([_color-scheme="Accent2"]),
+:host([color-scheme="Accent2"]) {
 	background-color: var(--ui5-avatar-accent2);
 }
 
-:host([_background-color="Accent3"]),
-:host([background-color="Accent3"]) {
+:host([_color-scheme="Accent3"]),
+:host([color-scheme="Accent3"]) {
 	background-color: var(--ui5-avatar-accent3);
 }
 
-:host([_background-color="Accent4"]),
-:host([background-color="Accent4"]) {
+:host([_color-scheme="Accent4"]),
+:host([color-scheme="Accent4"]) {
 	background-color: var(--ui5-avatar-accent4);
 }
 
-:host([_background-color="Accent5"]),
-:host([background-color="Accent5"]) {
+:host([_color-scheme="Accent5"]),
+:host([color-scheme="Accent5"]) {
 	background-color: var(--ui5-avatar-accent5);
 }
 
-:host([_background-color="Accent6"]),
-:host([background-color="Accent6"]) {
+:host([_color-scheme="Accent6"]),
+:host([color-scheme="Accent6"]) {
 	background-color: var(--ui5-avatar-accent6);
 }
 
-:host([_background-color="Accent7"]),
-:host([background-color="Accent7"]) {
+:host([_color-scheme="Accent7"]),
+:host([color-scheme="Accent7"]) {
 	background-color: var(--ui5-avatar-accent7);
 }
 
-:host([_background-color="Accent8"]),
-:host([background-color="Accent8"]) {
+:host([_color-scheme="Accent8"]),
+:host([color-scheme="Accent8"]) {
 	background-color: var(--ui5-avatar-accent8);
 }
 
-:host([_background-color="Accent9"]),
-:host([background-color="Accent9"]) {
+:host([_color-scheme="Accent9"]),
+:host([color-scheme="Accent9"]) {
 	background-color: var(--ui5-avatar-accent9);
 }
 
-:host([_background-color="Accent10"]),
-:host([background-color="Accent10"]) {
+:host([_color-scheme="Accent10"]),
+:host([color-scheme="Accent10"]) {
 	background-color: var(--ui5-avatar-accent10);
 }
 
-:host([_background-color="Placeholder"]),
-:host([background-color="Placeholder"]) {
+:host([_color-scheme="Placeholder"]),
+:host([color-scheme="Placeholder"]) {
 	background-color: var(--ui5-avatar-placeholder);
 }
 
diff --git a/packages/main/src/types/AvatarBackgroundColor.js b/packages/main/src/types/AvatarColorScheme.js
similarity index 67%
rename from packages/main/src/types/AvatarBackgroundColor.js
rename to packages/main/src/types/AvatarColorScheme.js
index 4a984982ee19..84052fe4c06a 100644
--- a/packages/main/src/types/AvatarBackgroundColor.js
+++ b/packages/main/src/types/AvatarColorScheme.js
@@ -1,11 +1,11 @@
 import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
 
 /**
- * Different types of AvatarBackgroundColor.
- * @lends sap.ui.webcomponents.main.types.AvatarBackgroundColor.prototype
+ * Different types of AvatarColorSchemes.
+ * @lends sap.ui.webcomponents.main.types.AvatarColorScheme.prototype
  * @public
  */
-const AvatarBackGroundColors = {
+const AvatarColorSchemes = {
 	/**
 	 *
 	 * @public
@@ -86,19 +86,19 @@ const AvatarBackGroundColors = {
 
 /**
  * @class
- * Different types of AvatarBackgroundColor.
+ * Different types of AvatarColorScheme.
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.types.AvatarBackgroundColor
+ * @alias sap.ui.webcomponents.main.types.AvatarColorScheme
  * @public
  * @enum {string}
  */
-class AvatarBackgroundColor extends DataType {
+class AvatarColorScheme extends DataType {
 	static isValid(value) {
-		return !!AvatarBackGroundColors[value];
+		return !!AvatarColorSchemes[value];
 	}
 }
 
-AvatarBackgroundColor.generateTypeAccessors(AvatarBackGroundColors);
+AvatarColorScheme.generateTypeAccessors(AvatarColorSchemes);
 
-export default AvatarBackgroundColor;
+export default AvatarColorScheme;
diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html
index e0e20e598cd9..3c644c6cc416 100644
--- a/packages/main/test/pages/Avatar.html
+++ b/packages/main/test/pages/Avatar.html
@@ -69,31 +69,31 @@ <h3>Avatar - UI5 Icons</h3>
 
 	<section>
 		<h3>Avatar - Background colors [ Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Accent7, Accent8, Accent9, Accent10, Placeholder ]</h3>
-		<ui5-avatar background-color="Accent1" size="L"></ui5-avatar>
-		<ui5-avatar background-color="Accent2" size="L"></ui5-avatar>
-		<ui5-avatar background-color="Accent3" size="L"></ui5-avatar>
-		<ui5-avatar background-color="Accent4" size="L"></ui5-avatar>
-		<ui5-avatar background-color="Accent5" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent1" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent2" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent3" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent4" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent5" size="L"></ui5-avatar>
 		<ui5-avatar size="L"></ui5-avatar>
-		<ui5-avatar background-color="Accent7" size="L"></ui5-avatar>
-		<ui5-avatar background-color="Accent8" size="L"></ui5-avatar>
-		<ui5-avatar background-color="Accent9" size="L"></ui5-avatar>
-		<ui5-avatar background-color="Accent10" size="L"></ui5-avatar>
-		<ui5-avatar background-color="Placeholder" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent7" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent8" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent9" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Accent10" size="L"></ui5-avatar>
+		<ui5-avatar color-scheme="Placeholder" size="L"></ui5-avatar>
 	</section>
 
 	<section>
 		<h3>Avatar - Initials</h3>
-		<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
-		<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
-		<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
-		<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
-		<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
+		<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
+		<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
+		<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
+		<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
+		<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
 		<ui5-avatar initials="XS" shape="Square" size="XS"></ui5-avatar>
-		<ui5-avatar initials="S" background-color="Accent7" shape="Square" size="S"></ui5-avatar>
-		<ui5-avatar initials="M" background-color="Accent8" shape="Square" size="M"></ui5-avatar>
-		<ui5-avatar initials="L" background-color="Accent9" shape="Square" size="L"></ui5-avatar>
-		<ui5-avatar initials="XL" background-color="Accent10" shape="Square" size="XL"></ui5-avatar>
+		<ui5-avatar initials="S" color-scheme="Accent7" shape="Square" size="S"></ui5-avatar>
+		<ui5-avatar initials="M" color-scheme="Accent8" shape="Square" size="M"></ui5-avatar>
+		<ui5-avatar initials="L" color-scheme="Accent9" shape="Square" size="L"></ui5-avatar>
+		<ui5-avatar initials="XL" color-scheme="Accent10" shape="Square" size="XL"></ui5-avatar>
 	</section>
 
 	<section>
diff --git a/packages/main/test/pages/AvatarGroup.html b/packages/main/test/pages/AvatarGroup.html
index a877885f8df9..f77169174486 100644
--- a/packages/main/test/pages/AvatarGroup.html
+++ b/packages/main/test/pages/AvatarGroup.html
@@ -294,7 +294,7 @@ <h3>AvatarGroup with user defined overflow button</h3>
 		hiddenItems.forEach(function (avatar, index) {
 			var color = avatarGroup.colorScheme[firstHiddenIndex + index]
 			html += '<div class="avatar-slot" style="padding: 5px">' +
-						'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + color + '"></ui5-avatar>' +
+						'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" color-scheme="' + color + '"></ui5-avatar>' +
 					'</div>';
 		});
 
@@ -302,7 +302,7 @@ <h3>AvatarGroup with user defined overflow button</h3>
 			var avatarRef = items[index];
 
 			html +=  '<div class="avatar-slot">' +
-						'<ui5-avatar interactive image="' + avatarRef.image + '" initials="' + avatarRef.initials + '" background-color="' + avatarRef._effectiveBackgroundColor + '"></ui5-avatar>' +
+						'<ui5-avatar interactive image="' + avatarRef.image + '" initials="' + avatarRef.initials + '" color-scheme="' + avatarRef._effectiveBackgroundColor + '"></ui5-avatar>' +
 					'</div>';
 		}
 		placeholder.innerHTML = html;
@@ -314,7 +314,7 @@ <h3>AvatarGroup with user defined overflow button</h3>
 	function onAvatarClicked(avatarGroup, avatarRef) {
 		popAvatar.image = avatarRef.image;
 		popAvatar.initials = avatarRef.initials;
-		popAvatar.backgroundColor = avatarGroup.colorScheme[avatarGroup.items.indexOf(avatarRef)];
+		popAvatar.colorScheme = avatarGroup.colorScheme[avatarGroup.items.indexOf(avatarRef)];
 
 		individualPop.close();
 		individualPop.openBy(avatarRef);
diff --git a/packages/main/test/samples/Avatar.sample.html b/packages/main/test/samples/Avatar.sample.html
index 713412edca71..2fc1ba2a608e 100644
--- a/packages/main/test/samples/Avatar.sample.html
+++ b/packages/main/test/samples/Avatar.sample.html
@@ -76,18 +76,18 @@ <h4>Avatar with UI5 Icons</h4>
 <section>
 	<h4>Avatar with Initials</h4>
 	<div class="snippet">
-		<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
-		<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
-		<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
-		<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
-		<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
+		<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
+		<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
+		<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
+		<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
+		<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
 	</div>
 <pre class="prettyprint lang-html"><xmp>
-<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
-<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
-<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
-<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
-<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
+<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
+<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
+<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
+<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
+<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
 </xmp></pre>
 </section>
 
diff --git a/packages/main/test/samples/AvatarGroup.sample.html b/packages/main/test/samples/AvatarGroup.sample.html
index e0325bed8d90..b2e1fb047f04 100644
--- a/packages/main/test/samples/AvatarGroup.sample.html
+++ b/packages/main/test/samples/AvatarGroup.sample.html
@@ -62,7 +62,7 @@ <h4>Avatar Group - type "Individual"</h4>
 				function onAvatarClicked(avatarRef) {
 					const avatarIndex = avatarGroup.items.indexOf(avatarRef);
 
-					popAvatar.backgroundColor = avatarGroup.colorScheme[avatarIndex];
+					popAvatar.colorScheme = avatarGroup.colorScheme[avatarIndex];
 					popAvatar.initials = avatarRef.initials;
 					popAvatar.image = avatarRef.image;
 					popAvatar.icon = avatarRef.icon;
@@ -81,7 +81,7 @@ <h4>Avatar Group - type "Individual"</h4>
 						const color = avatarGroup.colorScheme[firstHiddenIndex + index];
 
 						html += '<div class="avatar-slot" style="padding: 5px">' +
-									'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + color + '"></ui5-avatar>' +
+									'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" color-scheme="' + color + '"></ui5-avatar>' +
 								'</div>';
 					});
 	
@@ -143,7 +143,7 @@ <h4>Avatar Group - type "Individual"</h4>
 		avatarGroup.hiddenItems.forEach((avatar, index) => {
 			html += `<ui5-avatar 
 						...
-						background-color="${avatarGroup.colorScheme[firstHiddenIndex + index]}"
+						color-scheme="${avatarGroup.colorScheme[firstHiddenIndex + index]}"
 					</ui5-avatar>`;
 		});
 
@@ -206,7 +206,7 @@ <h4>Avatar Group - type "Group"</h4>
 						const avatarColor = avatarGroup.colorScheme[index];
 
 						html += '<div class="avatar-slot" style="padding: 3px">' +
-									'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + avatarColor + '"></ui5-avatar>' +
+									'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" color-scheme="' + avatarColor + '"></ui5-avatar>' +
 								'</div>';
 					});
 	
diff --git a/packages/main/test/specs/AvatarGroup.spec.js b/packages/main/test/specs/AvatarGroup.spec.js
index d401d6b79cfc..9781dfb9cd4b 100644
--- a/packages/main/test/specs/AvatarGroup.spec.js
+++ b/packages/main/test/specs/AvatarGroup.spec.js
@@ -51,19 +51,19 @@ describe("avatar-group rendering", () => {
 		});
 	});
 
-	it("tests if _background-color attribute is automatically set to avatars", () => {
+	it("tests if _background-design attribute is automatically set to avatars", () => {
 		const avatars = browser.$$("#avatar-group-group ui5-avatar");
 
 		let index = 0;
 
 		avatars.forEach(avatar => {
-			const avatarBackgroundColor = avatar.getAttribute("_background-color");
+			const avatarBackgroundColor = avatar.getAttribute("_color-scheme");
 
 			if (++index > 10) {
 				index = 1;
 			}
 
-			assert.strictEqual(avatarBackgroundColor, `Accent${index}`, "AvatarGroup avatar-size property is assigned to avatars _size property");
+			assert.strictEqual(avatarBackgroundColor, `Accent${index}`, "AvatarGroup _color-scheme property is assigned to avatars _size property");
 		});
 	});