diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
index 973417493..d6ca92835 100644
--- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
+++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -4840,7 +4840,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -5268,7 +5268,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -5696,7 +5696,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -8314,7 +8314,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -16617,7 +16617,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -21657,7 +21657,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -22085,7 +22085,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -22513,7 +22513,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -25439,7 +25439,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -33293,7 +33293,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -33721,7 +33721,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -34149,7 +34149,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -34577,7 +34577,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -35005,7 +35005,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -36819,7 +36819,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -41883,7 +41883,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -44397,7 +44397,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -52130,7 +52130,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -61733,7 +61733,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <styled.div>
                               <div
@@ -64351,7 +64351,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-DJgqy hBRUWj"
+                            className="sc-DJgqy hRwxkI"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
diff --git a/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap b/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
index 9cd64364e..8d6966d20 100644
--- a/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
@@ -175,96 +175,6 @@ exports[`components > viewers > stop viewer should render with initial stop id a
               <div
                 className="stop-viewer-header"
               >
-                <div
-                  className="back-button-container"
-                >
-                  <Button
-                    active={false}
-                    block={false}
-                    bsClass="btn"
-                    bsSize="small"
-                    bsStyle="default"
-                    disabled={false}
-                    onClick={[Function]}
-                  >
-                    <button
-                      className="btn btn-sm btn-default"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <IconWithText
-                        Icon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "displayName": "ArrowLeft",
-                            "render": [Function],
-                          }
-                        }
-                      >
-                        <div
-                          style={
-                            Object {
-                              "display": "contents",
-                            }
-                          }
-                        >
-                          <Styled(styled.span)>
-                            <span
-                              className="sc-hkwmXC sc-bSFUlv eFsrhn gAUjbw"
-                            >
-                              <ArrowLeft>
-                                <StyledIconBase
-                                  iconAttrs={
-                                    Object {
-                                      "fill": "currentColor",
-                                      "xmlns": "http://www.w3.org/2000/svg",
-                                    }
-                                  }
-                                  iconVerticalAlign="middle"
-                                  iconViewBox="0 0 448 512"
-                                >
-                                  <ForwardRef
-                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa"
-                                    iconAttrs={
-                                      Object {
-                                        "fill": "currentColor",
-                                        "xmlns": "http://www.w3.org/2000/svg",
-                                      }
-                                    }
-                                    iconVerticalAlign="middle"
-                                    iconViewBox="0 0 448 512"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      className="StyledIconBase-sc-ea9ulj-0 fqiNOa"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      viewBox="0 0 448 512"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H109.3l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"
-                                        fill="currentColor"
-                                      />
-                                    </svg>
-                                  </ForwardRef>
-                                </StyledIconBase>
-                              </ArrowLeft>
-                            </span>
-                          </Styled(styled.span)>
-                          <span>
-                            <FormattedMessage
-                              id="common.forms.back"
-                            >
-                              common.forms.back
-                            </FormattedMessage>
-                          </span>
-                        </div>
-                      </IconWithText>
-                    </button>
-                  </Button>
-                </div>
                 <styled.div>
                   <div
                     className="sc-bTRMho cgDuJk"
diff --git a/example/example-config.yml b/example/example-config.yml
index 19a5260a3..0d7de1393 100644
--- a/example/example-config.yml
+++ b/example/example-config.yml
@@ -693,6 +693,8 @@ disableSingleItineraryDays: false
 #   hideRouteShapesWithinFlexZones: true
 #   # Setting to sort routes by the number of vehicles on each pattern
 #   sortRoutePatternsByVehicleCount: true
+#   # Whether to use the route color as the pattern viewer background
+#   useRouteColorAsBackground: true
 #   # Disable vehicle highlight if necessary (e.g. custom or inverted icons)
 #   vehicleIconHighlight: true
 #   # Customize vehicle icon padding (the default iconPadding is 2px in otp-ui)
diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
index 492405b56..d7fda5ac2 100644
--- a/lib/components/form/advanced-settings-panel.tsx
+++ b/lib/components/form/advanced-settings-panel.tsx
@@ -33,7 +33,9 @@ import { blue, getBaseColor } from '../util/colors'
 import { ComponentContext } from '../../util/contexts'
 import { generateModeSettingValues } from '../../util/api'
 import { getDependentName } from '../../util/user'
+import { invisibleCss } from '../util/invisible-a11y-label'
 import { User } from '../user/types'
+import BackButton from '../util/back-button'
 
 import {
   addCustomSettingLabels,
@@ -44,7 +46,6 @@ import {
   setModeButton,
   tripPlannerValidationErrors
 } from './util'
-import { invisibleCss } from '../util/invisible-a11y-label'
 import { setModeButtonEnabled } from './batch-settings'
 import { styledCheckboxCss } from './styled'
 import DateTimeModal from './date-time-modal'
@@ -274,16 +275,11 @@ const AdvancedSettingsPanel = ({
   return (
     <PanelOverlay className="advanced-settings" ref={innerRef}>
       <HeaderContainer>
-        <CloseButton
-          aria-label={closeButtonText}
+        <BackButton
+          backButtonText={closeButtonText}
           id="close-advanced-settings-button"
-          onClick={() => {
-            closePanel()
-          }}
-          title={closeButtonText}
-        >
-          <ArrowLeft size={22} />
-        </CloseButton>
+          onClick={closePanel}
+        />
         <h1 className="header-text">{headerText}</h1>
       </HeaderContainer>
       <DtSelectorContainer>
diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css
index 92ad6fc72..bdcc60878 100644
--- a/lib/components/mobile/mobile.css
+++ b/lib/components/mobile/mobile.css
@@ -253,6 +253,7 @@
 }
 
 .otp.mobile .route-viewer-header {
+  padding: 12px;
   margin: 0;
 }
 
diff --git a/lib/components/mobile/pattern-viewer.js b/lib/components/mobile/pattern-viewer.js
index 4f55562fd..f3688a25d 100644
--- a/lib/components/mobile/pattern-viewer.js
+++ b/lib/components/mobile/pattern-viewer.js
@@ -38,7 +38,7 @@ class MobilePatternViewer extends Component {
         />
         <main tabIndex={-1}>
           <div className="viewer-container">
-            <PatternViewer hideBackButton ModeIcon={ModeIcon} />
+            <PatternViewer ModeIcon={ModeIcon} />
           </div>
 
           {/* The map is less important semantically, so keyboard focus and screen readers
diff --git a/lib/components/mobile/route-viewer.js b/lib/components/mobile/route-viewer.js
index 51268ef73..801764670 100644
--- a/lib/components/mobile/route-viewer.js
+++ b/lib/components/mobile/route-viewer.js
@@ -38,7 +38,7 @@ class MobileRouteViewer extends Component {
         />
         <main tabIndex={-1}>
           <div className="viewer-container">
-            <RouteViewer hideBackButton hideHeader ModeIcon={ModeIcon} />
+            <RouteViewer hideHeader ModeIcon={ModeIcon} />
           </div>
 
           {/* The map is less important semantically, so keyboard focus and screen readers
diff --git a/lib/components/mobile/stop-viewer.tsx b/lib/components/mobile/stop-viewer.tsx
index 5ae17f4a6..033e692ab 100644
--- a/lib/components/mobile/stop-viewer.tsx
+++ b/lib/components/mobile/stop-viewer.tsx
@@ -24,7 +24,7 @@ const MobileStopViewer = ({ setViewedStop }: Props) => {
       />
       <main tabIndex={-1}>
         <div className="viewer-container">
-          <StopScheduleViewer hideBackButton />
+          <StopScheduleViewer />
         </div>
 
         {/* The map is less important semantically, so keyboard focus and screen readers
diff --git a/lib/components/mobile/trip-viewer.tsx b/lib/components/mobile/trip-viewer.tsx
index 8363158b8..bfcbb6d04 100644
--- a/lib/components/mobile/trip-viewer.tsx
+++ b/lib/components/mobile/trip-viewer.tsx
@@ -23,7 +23,7 @@ const MobileTripViewer = ({ setViewedTrip }: Props) => {
       />
       <main tabIndex={-1}>
         <div className="viewer-container">
-          <TripViewer hideBackButton />
+          <TripViewer hideHeader />
         </div>
 
         {/* The map is less important semantically, so keyboard focus and screen readers
diff --git a/lib/components/util/back-button.tsx b/lib/components/util/back-button.tsx
new file mode 100644
index 000000000..123e71552
--- /dev/null
+++ b/lib/components/util/back-button.tsx
@@ -0,0 +1,33 @@
+import { ArrowLeft } from '@styled-icons/fa-solid'
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledBackButton = styled.button`
+  background: transparent;
+  border: none;
+`
+
+const BackButton = ({
+  backButtonText,
+  id,
+  onClick
+}: {
+  backButtonText: string
+  id?: string
+  onClick: () => void
+}): JSX.Element => {
+  return (
+    <StyledBackButton
+      aria-label={backButtonText}
+      id={id}
+      onClick={() => {
+        onClick()
+      }}
+      title={backButtonText}
+    >
+      <ArrowLeft size={22} />
+    </StyledBackButton>
+  )
+}
+
+export default BackButton
diff --git a/lib/components/util/colors.ts b/lib/components/util/colors.ts
index d38ad920b..2626dfc94 100644
--- a/lib/components/util/colors.ts
+++ b/lib/components/util/colors.ts
@@ -33,7 +33,7 @@ const GREY_ON_WHITE = grey[700]
  */
 const BLUE_ON_WHITE = blue[800]
 
-const DARK_TEXT_GREY = '#333'
+const DARK_TEXT_GREY = '#333333'
 
 const DEFAULT_ROUTE_COLOR = grey[800]
 
diff --git a/lib/components/viewers/nearby/nearby-view.tsx b/lib/components/viewers/nearby/nearby-view.tsx
index 36b42e098..e198c3f60 100644
--- a/lib/components/viewers/nearby/nearby-view.tsx
+++ b/lib/components/viewers/nearby/nearby-view.tsx
@@ -71,7 +71,6 @@ type Props = {
   ) => void
   geocoderConfig: GeocoderConfig
   getCurrentPosition: any // TODO
-  hideBackButton?: boolean
   hideEmptyStops?: boolean
   location: string
   mobile?: boolean
diff --git a/lib/components/viewers/pattern-viewer.tsx b/lib/components/viewers/pattern-viewer.tsx
index b7b507b3e..fefc833aa 100644
--- a/lib/components/viewers/pattern-viewer.tsx
+++ b/lib/components/viewers/pattern-viewer.tsx
@@ -1,18 +1,13 @@
-import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { getMostReadableTextColor } from '@opentripplanner/core-utils/lib/route'
 import { TransitOperator } from '@opentripplanner/types'
 import React, { useCallback, useContext, useEffect } from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as uiActions from '../../actions/ui'
 import { ComponentContext } from '../../util/contexts'
-import { getFormattedMode } from '../../util/i18n'
 import {
-  getModeFromRoute,
-  getRouteColorBasedOnSettings,
+  getPatternViewerColors,
   getRouteOrPatternViewerTitle
 } from '../../util/viewer'
 import { getRouteOperator } from '../../util/state'
@@ -21,18 +16,19 @@ import {
   ViewedRouteObject,
   ViewedRouteState
 } from '../util/types'
-import { StyledIconWrapper } from '../util/styledIcon'
+import BackButton from '../util/back-button'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import PageTitle from '../util/page-title'
 
+import { RouteRowDetails } from './route-row'
 import RouteDetails from './route-details'
-import RouteName from './route-name'
 import VehiclePositionRetriever from './vehicle-position-retriever'
 
 interface Props {
   findRoutesIfNeeded: () => void
-  hideBackButton?: boolean
   setViewedRoute: SetViewedRouteHandler
   transitOperators: TransitOperator[]
+  useRouteColorAsBackground?: boolean
   vehicleIconHighlight: boolean
   viewedRoute?: ViewedRouteState
   viewedRouteObject?: ViewedRouteObject
@@ -40,9 +36,9 @@ interface Props {
 
 const PatternViewer = ({
   findRoutesIfNeeded,
-  hideBackButton,
   setViewedRoute,
   transitOperators,
+  useRouteColorAsBackground,
   vehicleIconHighlight,
   viewedRoute,
   viewedRouteObject: route
@@ -85,15 +81,19 @@ const PatternViewer = ({
   if (patternId && route) {
     // Find operator based on agency_id (extracted from OTP route ID).
     const operator = getRouteOperator(route, transitOperators)
-    const routeColor = getRouteColorBasedOnSettings(operator, route)
-    const textColor = getMostReadableTextColor(routeColor, route?.textColor)
+    const { backgroundColor, textColor } = getPatternViewerColors(
+      useRouteColorAsBackground,
+      operator,
+      route
+    )
     const fill = vehicleIconHighlight === false ? undefined : textColor
 
+    const backButtonText = intl.formatMessage({ id: 'common.forms.back' })
     return (
       <div
         className="route-viewer pattern-viewer"
         style={{
-          backgroundColor: routeColor,
+          backgroundColor: backgroundColor,
           color: textColor,
           fill
         }}
@@ -109,40 +109,30 @@ const PatternViewer = ({
         />
         {/* Header Block */}
         <div
-          className="route-viewer-header"
-          style={{ backgroundColor: routeColor }}
+          className="header-with-back-button pattern-viewer-header"
+          style={{ backgroundColor: backgroundColor }}
         >
-          {/* Back button */}
-          {!hideBackButton && (
-            <div className="back-button-container">
-              <Button bsSize="small" onClick={_backClicked}>
-                <StyledIconWrapper>
-                  <ArrowLeft />
-                </StyledIconWrapper>
-                <FormattedMessage id="common.forms.back" />
-              </Button>
-            </div>
-          )}
-          <div className="header-text route-expanded">
-            <h1 style={{ display: 'contents' }}>
-              {!route.pending && ModeIcon && (
-                <ModeIcon
-                  aria-label={getFormattedMode(
-                    getModeFromRoute(route).toLowerCase(),
-                    intl
-                  )}
-                  mode={getModeFromRoute(route)}
-                  style={{ maxHeight: 40 }}
-                  width={22}
-                />
-              )}
-              <RouteName
-                isOnColoredBackground
+          <BackButton
+            backButtonText={backButtonText}
+            id="pattern-viewer-back-button"
+            onClick={_backClicked}
+          />
+          <h1 style={{ display: 'contents', lineHeight: '1.4' }}>
+            {!route.pending && ModeIcon ? (
+              <RouteRowDetails
+                intl={intl}
+                isActive={false}
+                ModeIcon={ModeIcon}
                 route={route}
                 RouteRenderer={RouteRenderer}
               />
-            </h1>
-          </div>
+            ) : (
+              <InvisibleA11yLabel>
+                {/* Show loading text for screen readers while route is loading (axe tests) */}
+                <FormattedMessage id="common.forms.loading" />
+              </InvisibleA11yLabel>
+            )}
+          </h1>
         </div>
         <RouteDetails operator={operator} patternId={patternId} route={route} />
       </div>
@@ -158,6 +148,8 @@ const mapStateToProps = (state: any) => {
   const { viewedRoute } = state.otp.ui
   return {
     transitOperators: state.otp.config.transitOperators,
+    useRouteColorAsBackground:
+      state.otp.config?.routeViewer?.useRouteColorAsBackground,
     vehicleIconHighlight: state.otp.config?.routeViewer?.vehicleIconHighlight,
     viewedRoute,
     viewedRouteObject: state.otp.transitIndex.routes?.[viewedRoute?.routeId]
diff --git a/lib/components/viewers/route-details.tsx b/lib/components/viewers/route-details.tsx
index e7c4dac02..6218e04dc 100644
--- a/lib/components/viewers/route-details.tsx
+++ b/lib/components/viewers/route-details.tsx
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux'
 import { Dropdown } from '@opentripplanner/building-blocks'
 import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
-import { getMostReadableTextColor } from '@opentripplanner/core-utils/lib/route'
 import { Stop, TransitOperator } from '@opentripplanner/types'
 import React, { Component } from 'react'
 import styled from 'styled-components'
@@ -11,7 +10,7 @@ import { AppReduxState } from '../../util/state-types'
 import { DEFAULT_ROUTE_COLOR } from '../util/colors'
 import { extractMainHeadsigns, PatternSummary } from '../../util/pattern-viewer'
 import { getOperatorName } from '../../util/state'
-import { getRouteColorBasedOnSettings } from '../../util/viewer'
+import { getPatternViewerColors } from '../../util/viewer'
 import { LinkOpensNewWindow } from '../util/externalLink'
 import {
   SetViewedRouteHandler,
@@ -19,13 +18,13 @@ import {
   ViewedRouteObject
 } from '../util/types'
 import { UnstyledButton } from '../util/unstyled-button'
+import OperatorLogo from '../util/operator-logo'
 
 import {
   Container,
   HeadsignSelectLabel,
   LogoLinkContainer,
   PatternContainer,
-  RouteNameContainer,
   StopContainer,
   StopLink,
   Stop as StyledStop
@@ -64,6 +63,7 @@ interface Props {
   setViewedRoute: SetViewedRouteHandler
   setViewedStop: SetViewedStopHandler
   sortPatternsByVehicleCount: boolean
+  useRouteColorAsBackground?: boolean
 }
 
 class RouteDetails extends Component<Props> {
@@ -100,14 +100,19 @@ class RouteDetails extends Component<Props> {
       patternId,
       route,
       setHoveredStop,
-      sortPatternsByVehicleCount
+      sortPatternsByVehicleCount,
+      useRouteColorAsBackground
     } = this.props
     const { agency, patterns = {}, shortName, url } = route
     const pattern = patterns[patternId]
 
     const moreDetailsURL = url || route?.agency?.url
 
-    const routeColor = getRouteColorBasedOnSettings(operator, route)
+    const { backgroundColor, routeColor, textColor } = getPatternViewerColors(
+      useRouteColorAsBackground,
+      operator,
+      route
+    )
 
     const headsigns = extractMainHeadsigns(
       patterns,
@@ -139,37 +144,7 @@ class RouteDetails extends Component<Props> {
       patternSelectLabel
 
     return (
-      <Container
-        backgroundColor={routeColor}
-        full={pattern != null}
-        textColor={getMostReadableTextColor(routeColor, route?.textColor)}
-      >
-        <RouteNameContainer className="operator-info">
-          <LogoLinkContainer>
-            {agency && (
-              <>
-                {/** TODO: use <OperatorLogo /> here? */}
-                <FormattedMessage
-                  id="components.RouteDetails.operatedBy"
-                  values={{
-                    agencyName: getOperatorName(operator, route)
-                  }}
-                />
-              </>
-            )}
-            {moreDetailsURL && (
-              <LinkOpensNewWindow
-                contents={
-                  <FormattedMessage id="components.RouteDetails.moreDetails" />
-                }
-                style={{
-                  color: getMostReadableTextColor(routeColor, route?.textColor)
-                }}
-                url={moreDetailsURL}
-              />
-            )}
-          </LogoLinkContainer>
-        </RouteNameContainer>
+      <Container backgroundColor={backgroundColor} full={pattern != null}>
         {headsigns && headsigns.length > 0 && (
           <PatternContainer className="pattern-picker">
             <HeadsignSelectLabel htmlFor="headsign-selector-label">
@@ -200,15 +175,16 @@ class RouteDetails extends Component<Props> {
               style={{
                 fontSize: 'inherit',
                 fontWeight: 400,
-                margin: '10px 0 10px 8px'
+                margin: 0,
+                padding: '10px'
               }}
             >
               <FormattedMessage id="components.RouteViewer.stopsInDirectionOfTravel" />
             </h2>
             <StopContainer
-              backgroundColor={routeColor}
+              backgroundColor={backgroundColor}
               onMouseLeave={() => setHoveredStop(null)}
-              textColor={getMostReadableTextColor(routeColor, route?.textColor)}
+              textColor={textColor}
             >
               {pattern?.stops?.map((stop, index) => (
                 <StyledStop
@@ -221,18 +197,13 @@ class RouteDetails extends Component<Props> {
                       ? DEFAULT_ROUTE_COLOR
                       : routeColor
                   }
-                  textColor={getMostReadableTextColor(
-                    routeColor,
-                    route?.textColor
-                  )}
+                  textColor={textColor}
+                  useRouteColorAsBg={useRouteColorAsBackground}
                 >
                   <StopLink
                     name={stop.name}
                     onFocus={() => setHoveredStop(stop.id)}
-                    textColor={getMostReadableTextColor(
-                      routeColor,
-                      route?.textColor
-                    )}
+                    textColor={textColor}
                   >
                     {stop.name}
                   </StopLink>
@@ -241,6 +212,29 @@ class RouteDetails extends Component<Props> {
             </StopContainer>
           </>
         )}
+        <LogoLinkContainer
+          textColor={textColor}
+          useRouteBgColor={useRouteColorAsBackground}
+        >
+          {operator && <OperatorLogo operator={operator} />}
+          {moreDetailsURL && (
+            <LinkOpensNewWindow
+              contents={
+                agency ? (
+                  <FormattedMessage
+                    id="components.RouteDetails.operatedBy"
+                    values={{
+                      agencyName: getOperatorName(operator, route)
+                    }}
+                  />
+                ) : (
+                  <FormattedMessage id="components.RouteDetails.moreDetails" />
+                )
+              }
+              url={moreDetailsURL}
+            />
+          )}
+        </LogoLinkContainer>
       </Container>
     )
   }
@@ -251,7 +245,9 @@ const mapStateToProps = (state: AppReduxState) => {
     state.otp.config.routeViewer?.sortRoutePatternsByVehicleCount
 
   return {
-    sortPatternsByVehicleCount: sortRoutePatternsByVehicleCount !== false
+    sortPatternsByVehicleCount: sortRoutePatternsByVehicleCount !== false,
+    useRouteColorAsBackground:
+      state.otp.config?.routeViewer?.useRouteColorAsBackground
   }
 }
 
diff --git a/lib/components/viewers/route-row.tsx b/lib/components/viewers/route-row.tsx
index 3c231d8b0..2f8d4bce7 100644
--- a/lib/components/viewers/route-row.tsx
+++ b/lib/components/viewers/route-row.tsx
@@ -121,6 +121,52 @@ const PatternViewerLink = styled(Link)`
   }
 `
 
+export const RouteRowDetails = ({
+  intl,
+  isActive,
+  ModeIcon,
+  operator,
+  route,
+  RouteRenderer
+}: {
+  ModeIcon: any
+  RouteRenderer: any
+  intl: IntlShape
+  isActive?: boolean
+  operator?: TransitOperatorConfig
+  route: ViewedRouteObject
+}): JSX.Element => {
+  const modeFromRoute = getModeFromRoute(route)
+  const { id, longName, shortName } = route
+  return (
+    <RouteDetailsContainer>
+      {operator && <OperatorLogo operator={operator} />}
+      {modeFromRoute && operator?.routeIcons !== false && (
+        <ModeIconElement>
+          <ModeIcon
+            aria-label={getFormattedMode(modeFromRoute.toLowerCase(), intl)}
+            height={28}
+            leg={{
+              routeId: id,
+              routeLongName: longName,
+              routeShortName: shortName
+            }}
+            mode={modeFromRoute}
+            role="img"
+            width={28}
+          />
+        </ModeIconElement>
+      )}
+      <RouteName route={route} RouteRenderer={RouteRenderer} />
+      {isActive && (
+        <InvisibleA11yLabel>
+          <FormattedMessage id="common.currentlySelected" />
+        </InvisibleA11yLabel>
+      )}
+    </RouteDetailsContainer>
+  )
+}
+
 export class RouteRow extends PureComponent<Props> {
   activeRef: React.RefObject<HTMLLIElement>
 
@@ -165,8 +211,7 @@ export class RouteRow extends PureComponent<Props> {
 
     if (!route) return null
 
-    const { id, longName, mode, patterns, shortName } = route
-    const modeFromRoute = getModeFromRoute(route)
+    const { id, longName, patterns, shortName } = route
     const routePath = `/route/${id}`
     const firstPattern =
       patterns && extractMainHeadsigns(patterns, shortName, () => '')?.[0]?.id
@@ -186,34 +231,14 @@ export class RouteRow extends PureComponent<Props> {
           to={routePath}
           tracking
         >
-          <RouteDetailsContainer>
-            <OperatorLogo operator={operator} />
-            {mode && operator.routeIcons !== false && (
-              <ModeIconElement>
-                <ModeIcon
-                  aria-label={getFormattedMode(
-                    modeFromRoute.toLowerCase(),
-                    intl
-                  )}
-                  height={28}
-                  leg={{
-                    routeId: id,
-                    routeLongName: longName,
-                    routeShortName: shortName
-                  }}
-                  mode={modeFromRoute}
-                  role="img"
-                  width={28}
-                />
-              </ModeIconElement>
-            )}
-            <RouteName route={route} RouteRenderer={RouteRenderer} />
-            {isActive && (
-              <InvisibleA11yLabel>
-                <FormattedMessage id="common.currentlySelected" />
-              </InvisibleA11yLabel>
-            )}
-          </RouteDetailsContainer>
+          <RouteRowDetails
+            intl={intl}
+            isActive={isActive}
+            ModeIcon={ModeIcon}
+            operator={operator}
+            route={route}
+            RouteRenderer={RouteRenderer}
+          />
         </RouteRowLink>
         <PatternViewerLink
           aria-label={patternViewerLinkText}
diff --git a/lib/components/viewers/route-viewer.tsx b/lib/components/viewers/route-viewer.tsx
index 3e13a6379..36711b870 100644
--- a/lib/components/viewers/route-viewer.tsx
+++ b/lib/components/viewers/route-viewer.tsx
@@ -1,5 +1,3 @@
-import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { Filter } from '@styled-icons/fa-solid/Filter'
 import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
@@ -21,10 +19,10 @@ import { getRouteOrPatternViewerTitle } from '../../util/viewer'
 import { StyledIconWrapper } from '../util/styledIcon'
 import { TransitOperatorConfig } from '../../util/config-types'
 import { ViewedRouteObject, ViewedRouteState } from '../util/types'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import PageTitle from '../util/page-title'
 
 import { RouteRow } from './route-row'
-import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import VehiclePositionRetriever from './vehicle-position-retriever'
 
 interface FilterProps {
@@ -39,7 +37,6 @@ interface Props {
   // Not really worried about the args for findRoute(s)IfNeeded.
   findRouteIfNeeded: () => void
   findRoutesIfNeeded: () => void
-  hideBackButton?: boolean
   hideHeader?: boolean
   intl: IntlShape
   modes: string[]
@@ -118,7 +115,6 @@ class RouteViewer extends Component<Props, State> {
       agencies,
       filter,
       findRouteIfNeeded,
-      hideBackButton,
       hideHeader,
       intl,
       modes,
@@ -160,18 +156,6 @@ class RouteViewer extends Component<Props, State> {
         />
         {/* Header Block */}
         <div className="route-viewer-header">
-          {/* Back button */}
-          {!hideBackButton && (
-            <div className="back-button-container">
-              <Button bsSize="small" onClick={this._backClicked}>
-                <StyledIconWrapper>
-                  <ArrowLeft />
-                </StyledIconWrapper>
-                <FormattedMessage id="common.forms.back" />
-              </Button>
-            </div>
-          )}
-
           {/* Header Text */}
           {!hideHeader && (
             <h1 className="header-text">
diff --git a/lib/components/viewers/stop-schedule-viewer.tsx b/lib/components/viewers/stop-schedule-viewer.tsx
index 82254f961..9c40eff9c 100644
--- a/lib/components/viewers/stop-schedule-viewer.tsx
+++ b/lib/components/viewers/stop-schedule-viewer.tsx
@@ -1,5 +1,4 @@
-import { Alert, Button } from 'react-bootstrap'
-import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
+import { Alert } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { ExclamationCircle } from '@styled-icons/fa-solid/ExclamationCircle'
 import { format, parse } from 'date-fns'
@@ -38,7 +37,6 @@ interface Props {
     forceFetch?: boolean
     stopId: string
   }) => void
-  hideBackButton?: boolean
   homeTimezone: string
   intl: IntlShape
   map?: MapRef
@@ -192,21 +190,10 @@ class StopScheduleViewer extends Component<Props, State> {
   }
 
   _renderHeader = (agencyCount: number) => {
-    const { hideBackButton, stopData, stopId } = this.props
+    const { stopData, stopId } = this.props
     return (
       // CSS class stop-viewer-header is needed for customizing how logos are displayed.
       <div className="stop-viewer-header">
-        {/* Back button */}
-        {!hideBackButton && (
-          <div className="back-button-container">
-            <Button bsSize="small" onClick={this._backClicked}>
-              <IconWithText Icon={ArrowLeft}>
-                <FormattedMessage id="common.forms.back" />
-              </IconWithText>
-            </Button>
-          </div>
-        )}
-
         <HeaderCard>
           {stopData?.name ? (
             <StopCardHeader
diff --git a/lib/components/viewers/styled.ts b/lib/components/viewers/styled.ts
index f828b715c..b2843e72f 100644
--- a/lib/components/viewers/styled.ts
+++ b/lib/components/viewers/styled.ts
@@ -1,11 +1,13 @@
-import { blue, DARK_TEXT_GREY, grey } from '../util/colors'
 import styled from 'styled-components'
 
+import { getBaseColor, grey } from '../util/colors'
+
 interface RenderProps {
   backgroundColor?: string
   full?: boolean
   routeColor?: string
   textColor?: string
+  useRouteColorAsBg?: boolean
 }
 
 /** Route Details */
@@ -21,10 +23,25 @@ export const RouteNameContainer = styled.div`
   padding: 8px;
   background-color: inherit;
 `
-export const LogoLinkContainer = styled.div`
+export const LogoLinkContainer = styled.div<{
+  textColor?: string
+  useRouteBgColor?: boolean
+}>`
   display: flex;
+  border-top: 1px solid
+    ${(props) => (props.useRouteBgColor ? props.textColor + '33' : '#33333333')};
   align-items: center;
-  justify-content: space-between;
+  gap: 10px;
+  padding: 15px 10px;
+  margin-top: -10px;
+
+  a {
+    color: ${(props) => props.textColor};
+    svg {
+      color: ${(props) =>
+        props.useRouteBgColor ? props.textColor : getBaseColor()};
+    }
+  }
 `
 export const HeadsignSelectLabel = styled.label`
   font-size: 18px;
@@ -37,8 +54,7 @@ export const PatternContainer = styled.div`
   color: inherit;
   display: flex;
   justify-content: space-between;
-  margin: 0;
-  padding: 8px;
+  padding: 8px 10px;
 
   label {
     width: 15%;
@@ -65,8 +81,8 @@ export const PatternContainer = styled.div`
 `
 
 export const StopContainer = styled.ol<RenderProps>`
-  color: ${(props) => props?.textColor || DARK_TEXT_GREY};
-  background-color: ${(props) => props?.backgroundColor || '#fff'};
+  color: ${(props) => props?.textColor};
+  background-color: ${(props) => props?.backgroundColor};
   overflow-y: scroll;
   /* Calculate the height of the container a little short to ensure all stops 
   are shown when browsers don't calculate 100% sensibly. */
@@ -74,7 +90,7 @@ export const StopContainer = styled.ol<RenderProps>`
   padding: 15px 0 0px;
 `
 export const StopLink = styled.button<RenderProps>`
-  color: ${(props) => props?.textColor + 'da' || DARK_TEXT_GREY};
+  color: ${(props) => props?.textColor + 'da'};
   background-color: transparent;
   border: none;
   padding: 0;
@@ -82,7 +98,7 @@ export const StopLink = styled.button<RenderProps>`
   width: 95%;
 
   &:hover {
-    color: ${(props) => props?.textColor || blue[900]};
+    color: ${(props) => props?.textColor};
     text-decoration: underline;
   }
 `
@@ -101,8 +117,11 @@ export const Stop = styled.li<RenderProps>`
     display: block;
     height: 20px;
     width: 20px;
-    border: 5px solid ${(props) => props.textColor + 'ee'};
-    background: ${(props) => props.routeColor};
+    border: 5px solid
+      ${(props) =>
+        props.useRouteColorAsBg ? props.textColor + 'ee' : props.routeColor};
+    background: ${(props) =>
+      props.useRouteColorAsBg ? props.routeColor : '#fff'};
     position: relative;
     top: 20px;
     left: -35px;
@@ -115,7 +134,8 @@ export const Stop = styled.li<RenderProps>`
     display: block;
     height: 1.65rem; /* set position in line-height agnostic way */
     width: 10px;
-    background: ${(props) => props.textColor + 'ee'};
+    background: ${(props) =>
+      props.useRouteColorAsBg ? props.textColor + 'ee' : props.routeColor};
     position: relative;
     left: -30px;
     /* this is a few pixels into the blob (to make it look attached) + 3.5rem so that each
diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index 2fd4488f5..036a40af3 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -1,6 +1,5 @@
-import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
 import { Bicycle } from '@styled-icons/fa-solid/Bicycle'
-import { Label as BsLabel, Button } from 'react-bootstrap'
+import { Label as BsLabel } from 'react-bootstrap'
 import { Circle } from '@styled-icons/fa-solid/Circle'
 import { connect } from 'react-redux'
 import { FormattedMessage, injectIntl } from 'react-intl'
@@ -21,6 +20,7 @@ import {
 } from '../../util/state'
 import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
 import Alert from '../util/alert'
+import BackButton from '../util/back-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import PageTitle from '../util/page-title'
 import SpanWithSpace from '../util/span-with-space'
@@ -41,7 +41,7 @@ const Stop = styled.li`
 `
 const RouteName = styled.h2`
   font-size: inherit;
-  margin: 0 0 1em 0;
+  margin: 1em 0;
 `
 const HeaderText = styled.h1`
   margin: 2px 0 0 0;
@@ -55,9 +55,10 @@ class TripViewer extends Component {
     activeItinerary: PropTypes.object,
     activeItineraryIndex: PropTypes.number,
     findTrip: apiActions.findTrip.type,
-    hideBackButton: PropTypes.bool,
+    hideHeader: PropTypes.bool,
     homeTimezone: PropTypes.string,
     intl: PropTypes.object,
+    setMainPanelContent: uiActions.setMainPanelContent.type,
     settingActiveItinerary: narrativeActions.settingActiveItinerary.type,
     setViewedTrip: uiActions.setViewedTrip.type,
     transitOperators: PropTypes.array,
@@ -69,6 +70,7 @@ class TripViewer extends Component {
 
   _backClicked = () => {
     this.props.setViewedTrip(null)
+    this.props.setMainPanelContent(null)
   }
 
   componentDidMount() {
@@ -132,8 +134,7 @@ class TripViewer extends Component {
   }
 
   render() {
-    const { hideBackButton, homeTimezone, intl, tripData, viewedTrip } =
-      this.props
+    const { hideHeader, homeTimezone, intl, tripData, viewedTrip } = this.props
     const startOfDay = toDate(getCurrentDate(homeTimezone), {
       timeZone: homeTimezone
     })
@@ -154,27 +155,27 @@ class TripViewer extends Component {
         <PageTitle title={this.getTitle()} />
         {/* Header Block */}
         <div className="trip-viewer-header">
-          {/* Back button */}
-          {!hideBackButton && (
-            <div className="back-button-container">
-              <Button bsSize="small" onClick={this._backClicked}>
-                <StyledIconWrapper>
-                  <ArrowLeft />
-                </StyledIconWrapper>
-                <FormattedMessage id="common.forms.back" />
-              </Button>
-            </div>
-          )}
-
-          {/* Header Text */}
-          <HeaderText className="header-text">
-            <FormattedMessage id="components.TripViewer.header" />
-          </HeaderText>
-          <div style={{ clear: 'both', height: '0.25ch' }} />
+          <div
+            className="header-with-back-button"
+            style={{ float: hideHeader && 'left' }}
+          >
+            <BackButton
+              backButtonText={intl.formatMessage({
+                id: 'common.forms.back'
+              })}
+              onClick={this._backClicked}
+            />
+            {/* Header Text */}
+            {!hideHeader && (
+              <HeaderText className="header-text">
+                <FormattedMessage id="components.TripViewer.header" />
+              </HeaderText>
+            )}
+          </div>
           {/* Basic Trip Info */}
           {tripData && (
             <div>
-              <RouteName>
+              <RouteName style={hideHeader && { margin: '.25em 0 1em 3em' }}>
                 {tripData.route && (
                   <FormattedMessage
                     id="components.TripViewer.routeHeader"
@@ -345,6 +346,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
   findTrip: apiActions.findTrip,
+  setMainPanelContent: uiActions.setMainPanelContent,
   settingActiveItinerary: narrativeActions.settingActiveItinerary,
   setViewedTrip: uiActions.setViewedTrip
 }
diff --git a/lib/components/viewers/viewer-container.tsx b/lib/components/viewers/viewer-container.tsx
index abeb227e6..c3ef16f8d 100644
--- a/lib/components/viewers/viewer-container.tsx
+++ b/lib/components/viewers/viewer-container.tsx
@@ -25,17 +25,17 @@ const ViewerContainer = ({
   // check for main panel content
   switch (mainPanelContent) {
     case MainPanelContent.ROUTE_VIEWER:
-      return <RouteViewer hideBackButton />
+      return <RouteViewer />
     case MainPanelContent.PATTERN_VIEWER:
-      return <PatternViewer hideBackButton />
+      return <PatternViewer />
     case MainPanelContent.TRIP_VIEWER:
-      return <TripViewer hideBackButton />
+      return <TripViewer />
     case MainPanelContent.NEARBY_VIEW:
-      return <NearbyView hideBackButton />
+      return <NearbyView />
     default:
       // check for stop viewer
       if (isViewingStop) {
-        return <StopScheduleViewer hideBackButton />
+        return <StopScheduleViewer />
       }
 
       // otherwise, return default content
diff --git a/lib/components/viewers/viewers.css b/lib/components/viewers/viewers.css
index 9cf1b1411..29ae82551 100644
--- a/lib/components/viewers/viewers.css
+++ b/lib/components/viewers/viewers.css
@@ -2,12 +2,15 @@
 
 .otp .route-viewer-header,
 .otp .trip-viewer-header {
-  padding: 12px;
-  margin: 5px;
+  padding: 17px;
+  border-bottom: 1px solid #33333333;
+}
+
+.otp .pattern-viewer-header {
+  padding: 12px 10px;
 }
 
 .otp .route-viewer,
-.otp .stop-viewer,
 .otp .trip-viewer,
 .otp .stop-viewer-body {
   display: flex;
@@ -16,13 +19,6 @@
   height: 100%;
 }
 
-.otp .route-viewer-body::before {
-  background-color: #33333333;
-  content: "";
-  display: block;
-  height: 2px;
-}
-
 @keyframes yellowfade {
   from {
     background: yellow;
@@ -52,11 +48,10 @@
   padding: 12px;
 }
 
-.otp .stop-viewer .back-button-container,
-.otp .trip-viewer .back-button-container,
-.otp .route-viewer .back-button-container {
-  float: left;
-  margin-right: 10px;
+.otp .trip-viewer .header-with-back-button,
+.otp .pattern-viewer .header-with-back-button {
+  display: flex;
+  gap: 5px;
 }
 
 .otp .trip-viewer .header-text,
@@ -67,11 +62,6 @@
   margin: 0;
 }
 
-.otp .trip-viewer .header-text,
-.otp .route-viewer .header-text {
-  display: contents;
-}
-
 .otp .route-viewer .header-text.route-expanded {
   display: flex;
   align-items: center;
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index 2a805bc0e..19b70efdf 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -378,6 +378,8 @@ export interface RouteViewerConfig {
   onlyShowCurrentServiceWeek?: boolean
   /** Setting to sort routes by the number of vehicles on each pattern */
   sortRoutePatternsByVehicleCount?: boolean
+  /** Whether to use the route color as the background color in the pattern viewer */
+  useRouteColorAsBackground?: boolean
   /** Disable vehicle highlight if necessary (e.g. custom or inverted icons) */
   vehicleIconHighlight?: boolean
   /** Customize vehicle icon padding (the default iconPadding is 2px in otp-ui) */
diff --git a/lib/util/viewer.js b/lib/util/viewer.js
index c3d026486..ff589872e 100644
--- a/lib/util/viewer.js
+++ b/lib/util/viewer.js
@@ -360,6 +360,19 @@ export function getRouteTextColorBasedOnSettings(operator = {}, route = {}) {
   return color
 }
 
+export const getPatternViewerColors = (
+  useRouteColorAsBackground,
+  operator,
+  route
+) => {
+  const routeColor = getRouteColorBasedOnSettings(operator, route)
+  const backgroundColor = useRouteColorAsBackground ? routeColor : '#fff'
+  const textColor = useRouteColorAsBackground
+    ? getMostReadableTextColor(backgroundColor, route?.textColor)
+    : DARK_TEXT_GREY
+  return { backgroundColor, routeColor, textColor }
+}
+
 /**
  * Helper method to determine if a stop being viewed is a flex stop. This is not marked by
  * otp, so we must use the geometry type to determine flex status (flex stops do not use points)