diff --git a/assets/js/accordion.js b/assets/js/accordion.js
new file mode 100644
index 0000000000000000000000000000000000000000..adce567016288c97669b745983f426f34336de1f
--- /dev/null
+++ b/assets/js/accordion.js
@@ -0,0 +1,8 @@
+(function ($, Drupal, drupalSettings) {
+    Drupal.behaviors.AccordionBehavior = {
+        attach: function (context, settings) {
+            // can access setting from 'drupalSettings';
+            $('.accordion-cern .panel-heading a').css('cssText','color: '+ drupalSettings.displayFormats.accordion.titleColor+ '!important;');
+        }
+    };
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/cern_display_formats.libraries.yml b/cern_display_formats.libraries.yml
index 5d281eb6312d9e54b0e34c8425645f075d0e8332..148c7c20b0bac058a4192e7e4a426fc6e1d2d6e2 100644
--- a/cern_display_formats.libraries.yml
+++ b/cern_display_formats.libraries.yml
@@ -1,3 +1,11 @@
+accordion-stylesheets:
+  version: 1.x
+  js:
+    assets/js/accordion.js: {}
+  dependencies:
+    - core/jquery
+    - core/drupalSettings
+
 teaser-list-stylesheets:
   version: 1.x
   css:
diff --git a/cern_display_formats.module b/cern_display_formats.module
index 1c8dc929898a86e3243e4ca15771925ec33d7b03..cc2c0c777f6e1a344139a45ef52b68c5bc692954 100755
--- a/cern_display_formats.module
+++ b/cern_display_formats.module
@@ -53,6 +53,9 @@ function cern_display_formats_views_post_render(ViewExecutable $view, &$output,
 		$view->display_handler->setOption('css_class', 'vertical-boxes');
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "accordion") {
 		$view->display_handler->setOption('css_class', 'accordion-cern');
+		$output['#attached']['library'][] = 'cern_display_formats/accordion-stylesheets'; //attaches the stylesheet
+		$title_color = $view->style_plugin->options['title_color'];
+		$output['#attached']['drupalSettings']['displayFormats']['accordion']['titleColor'] = $title_color;
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "card_grid") {
 		$view->display_handler->setOption('css_class', 'cern-view-display-page cern-view-display-resources');
 	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "event_grid") {
diff --git a/src/Plugin/views/style/Accordion.php b/src/Plugin/views/style/Accordion.php
index a2ae76c9f486f72f27dada24d74a3090425e7a45..7be4076952cdb3a6d090799d51f68aafee423b7b 100644
--- a/src/Plugin/views/style/Accordion.php
+++ b/src/Plugin/views/style/Accordion.php
@@ -40,6 +40,7 @@ class Accordion extends DefaultStyle {
 	protected function defineOptions(){
 		$options = parent::defineOptions();
 		$options['row_class'] = array('default'=> 'carousel-cern-item') ;
+		$options['title_color'] = array('default'=> '#000000') ;
 		return $options;
 	}
 
@@ -58,6 +59,14 @@ class Accordion extends DefaultStyle {
 				'#description' => t('For Accordion, make sure you have set carousel-cern-item as one of the row classes'),
 				'#default_value' => (!empty($this->options['row_class'])) ? $this->options['row_class'] : 'carousel-cern-item',
 		);
+
+		// Option to set a color for the accordion title
+		$form['title_color'] = array(
+				'#type' => 'color',
+				'#title' => t('Title Color'),
+				'#description' => t('Choose the color that you want the Accordion title to have'),
+				'#default_value' => (!empty($this->options['title_color'])) ? $this->options['title_color'] : '#000000',
+		);
 	}
 
 }
\ No newline at end of file