diff -u b/core/modules/update/css/update.admin.theme.css b/core/modules/update/css/update.admin.theme.css
--- b/core/modules/update/css/update.admin.theme.css
+++ b/core/modules/update/css/update.admin.theme.css
@@ -67,6 +67,12 @@
   border: 0;
   background-color: inherit;
 }
+.project-update__compatibility-details details {
+  height: 20px;
+  margin: 0;
+  border: 0;
+  background-color: inherit;
+}
 project-update__compatibility-details details a {
   color: #5c5c5b;
   border: 0;
@@ -79,4 +85,17 @@
+.project-update__compatibility-details details.compatible summary,
+.project-update__compatibility-details details[open].compatible summary {
+  color: green;
+}
+.project-update__compatibility-details details.not-compatible summary,
+.project-update__compatibility-details details[open].not-compatible summary {
+  color: #a51b00;
+}
 .project-update__compatibility-details details .details-wrapper {
   padding: 0.25em 0 0 0;
+}
+.project-update__compatibility-details .compatible .details-wrapper {
   color: #5c5c5b;
 }
+.project-update__compatibility-details .not-compatible .details-wrapper {
+  color: #a51b00;
+}
diff -u b/core/modules/update/src/ProjectCoreCompatibility.php b/core/modules/update/src/ProjectCoreCompatibility.php
--- b/core/modules/update/src/ProjectCoreCompatibility.php
+++ b/core/modules/update/src/ProjectCoreCompatibility.php
@@ -142,11 +142,16 @@
         $release['core_compatibility_message'] = $this->createMessageFromCoreCompatibility($release['core_compatibility']);
         $release['core_compatibility_details'] = [
           '#type' => 'details',
-          '#title' => $release['core_compatible'] ? $this->t('Compatible releases') : $this->t('Not compatible'),
+          '#title' => $release['core_compatible'] ? $this->t('Compatible') : $this->t('Not compatible'),
           '#open' => FALSE,
           'message' => [
             '#markup' => $release['core_compatibility_message'],
           ],
+          '#attributes' => [
+            'class' => [
+              $release['core_compatible'] ? 'compatible' : 'not-compatible',
+            ],
+          ],
         ];
       }
     }
diff -u b/core/themes/stable/css/update/update.admin.theme.css b/core/themes/stable/css/update/update.admin.theme.css
--- b/core/themes/stable/css/update/update.admin.theme.css
+++ b/core/themes/stable/css/update/update.admin.theme.css
@@ -75,9 +75,22 @@
-.project-update__compatibility-details details summary { 
+.project-update__compatibility-details details summary {
   padding: 0;
   text-transform: none;
   font-weight: normal;
 }
+.project-update__compatibility-details details.compatible summary,
+.project-update__compatibility-details details[open].compatible summary {
+  color: green;
+}
+.project-update__compatibility-details details.not-compatible summary,
+.project-update__compatibility-details details[open].not-compatible summary {
+  color: #a51b00;
+}
 .project-update__compatibility-details details .details-wrapper {
   padding: 0.25em 0 0 0;
+}
+.project-update__compatibility-details .compatible .details-wrapper {
   color: #5c5c5b;
 }
+.project-update__compatibility-details .not-compatible .details-wrapper {
+  color: #a51b00;
+}