diff --git a/src/appshell/appshell.qrc b/src/appshell/appshell.qrc
index cd960c51d5..4a5724e492 100644
--- a/src/appshell/appshell.qrc
+++ b/src/appshell/appshell.qrc
@@ -16,6 +16,7 @@
         <file>qml/AboutDialog.qml</file>
         <file>qml/AboutMusicXMLDialog.qml</file>
         <file>qml/resources/mu_logo.svg</file>
+        <file>qml/shared/AccentColorsList.qml</file>
         <file>qml/shared/ThemeSamplesList.qml</file>
         <file>qml/shared/internal/ThemeSample.qml</file>
         <file>qml/FirstLaunchSetup/FirstLaunchSetupDialog.qml</file>
diff --git a/src/appshell/qml/FirstLaunchSetup/ThemesPage.qml b/src/appshell/qml/FirstLaunchSetup/ThemesPage.qml
index b2adbed2d1..c40cca047b 100644
--- a/src/appshell/qml/FirstLaunchSetup/ThemesPage.qml
+++ b/src/appshell/qml/FirstLaunchSetup/ThemesPage.qml
@@ -42,10 +42,10 @@ Page {
 
     ColumnLayout {
         anchors.centerIn: parent
-        spacing: 32
+        spacing: 28
 
         ThemeSamplesList {
-            Layout.alignment: Qt.AlignHCenter
+            Layout.alignment: Qt.AlignCenter
 
             themes: model.highContrastEnabled ? model.highContrastThemes : model.generalThemes
             currentThemeCode: model.currentThemeCode
@@ -57,9 +57,33 @@ Page {
             }
         }
 
+        AccentColorsList {
+            id: accentColorsList
+            Layout.alignment: Qt.AlignCenter
+            Layout.preferredHeight: Math.max(implicitHeight, highContrastPreferencesHintLabel.implicitHeight)
+            visible: !model.highContrastEnabled
+
+            colors: model.accentColors
+            currentColorIndex: model.currentAccentColorIndex
+
+            sampleSize: 20
+            spacing: 8
+
+            onAccentColorChangeRequested: function(newColorIndex) {
+                model.currentAccentColorIndex = newColorIndex
+            }
+        }
+
+        StyledTextLabel {
+            id: highContrastPreferencesHintLabel
+            visible: model.highContrastEnabled
+            Layout.fillWidth: true
+            Layout.preferredHeight: Math.max(implicitHeight, accentColorsList.implicitHeight)
+            text: qsTrc("appshell", "Further high contrast settings are available in Preferences.")
+        }
+
         CheckBox {
-            Layout.alignment: Qt.AlignHCenter
-            width: implicitWidth
+            Layout.alignment: Qt.AlignCenter
 
             text: qsTrc("appshell", "Enable high contrast")
             checked: model.highContrastEnabled
diff --git a/src/appshell/qml/Preferences/internal/AccentColorsSection.qml b/src/appshell/qml/Preferences/internal/AccentColorsSection.qml
index 68c33126df..6c617738f9 100644
--- a/src/appshell/qml/Preferences/internal/AccentColorsSection.qml
+++ b/src/appshell/qml/Preferences/internal/AccentColorsSection.qml
@@ -25,11 +25,13 @@ import QtQuick.Controls 2.15
 import MuseScore.Ui 1.0
 import MuseScore.UiComponents 1.0
 
+import "../../shared"
+
 Row {
     id: root
 
-    property alias colors: view.model
-    property alias currentColorIndex: view.currentIndex
+    property alias colors: colorsList.colors
+    property alias currentColorIndex: colorsList.currentColorIndex
 
     property NavigationPanel navigation: NavigationPanel {
         name: titleLabel.text
@@ -48,7 +50,7 @@ Row {
 
     signal accentColorChangeRequested(var newColorIndex)
 
-    height: 36
+    height: colorsList.height
     spacing: 0
 
     StyledTextLabel {
@@ -58,60 +60,18 @@ Row {
         anchors.verticalCenter: parent.verticalCenter
         horizontalAlignment: Qt.AlignLeft
 
-        text: qsTrc("appshell", "Accent colour:")
+        text: qsTrc("appshell", "Accent color:")
     }
 
-    RadioButtonGroup {
-        id: view
+    AccentColorsList {
+        id: colorsList
 
-        spacing: 10
+        navigationPanel: root.navigation
 
-        delegate: RoundedRadioButton {
-            id: button
+        sampleSize: 30
 
-            width: 36
-            height: width
-
-            checked: view.currentIndex === model.index
-
-            property color accentColor: modelData
-
-            navigation.name: "AccentColourButton"
-            navigation.panel: root.navigation
-            navigation.column: model.index
-            navigation.accessible.name: Utils.colorToString(accentColor)
-
-            onToggled: {
-                root.accentColorChangeRequested(model.index)
-            }
-
-            indicator: Rectangle {
-                anchors.fill: parent
-
-                radius: width / 2
-
-                border.color: ui.theme.fontPrimaryColor
-                border.width: parent.checked ? 1 : 0
-
-                color: "transparent"
-
-                NavigationFocusBorder { navigationCtrl: button.navigation }
-
-                Rectangle {
-                    anchors.centerIn: parent
-
-                    width: 30
-                    height: width
-                    radius: width / 2
-
-                    border.color: ui.theme.strokeColor
-                    border.width: 1
-
-                    color: button.accentColor
-                }
-            }
-
-            background: Item {}
+        onAccentColorChangeRequested: function(newColorIndex) {
+            root.accentColorChangeRequested(newColorIndex)
         }
     }
 }
diff --git a/src/appshell/qml/shared/AccentColorsList.qml b/src/appshell/qml/shared/AccentColorsList.qml
new file mode 100644
index 0000000000..eef707df79
--- /dev/null
+++ b/src/appshell/qml/shared/AccentColorsList.qml
@@ -0,0 +1,90 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-only
+ * MuseScore-CLA-applies
+ *
+ * MuseScore
+ * Music Composition & Notation
+ *
+ * Copyright (C) 2021 MuseScore BVBA and others
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import MuseScore.Ui 1.0
+import MuseScore.UiComponents 1.0
+
+RadioButtonGroup {
+    id: root
+
+    property alias colors: root.model
+    property alias currentColorIndex: root.currentIndex
+
+    property NavigationPanel navigationPanel: null
+
+    property real sampleSize: 30
+    readonly property real totalSampleSize: sampleSize + 6
+
+    signal accentColorChangeRequested(var newColorIndex)
+
+    implicitWidth: count * totalSampleSize + (count - 1) * spacing
+    implicitHeight: totalSampleSize
+    spacing: 10
+
+    delegate: RoundedRadioButton {
+        id: button
+
+        width: root.totalSampleSize
+        height: width
+
+        checked: root.currentIndex === model.index
+
+        property color accentColor: modelData
+
+        navigation.name: "AccentColourButton"
+        navigation.panel: root.navigationPanel
+        navigation.column: model.index
+        navigation.accessible.name: Utils.colorToString(accentColor)
+
+        onToggled: {
+            root.accentColorChangeRequested(model.index)
+        }
+
+        indicator: Rectangle {
+            anchors.fill: parent
+
+            color: "transparent"
+            border.color: ui.theme.fontPrimaryColor
+            border.width: parent.checked ? 1 : 0
+            radius: width / 2
+
+            NavigationFocusBorder { navigationCtrl: button.navigation }
+
+            Rectangle {
+                anchors.centerIn: parent
+
+                width: root.sampleSize
+                height: width
+                radius: width / 2
+
+                border.color: ui.theme.strokeColor
+                border.width: 1
+
+                color: button.accentColor
+            }
+        }
+
+        background: Item {}
+    }
+}