Fix indicator label text color so readable

vacs-map-app/src/components/CardWrapper.vue

@@ -6,7 +6,11 @@
       <div class="title" :class="{ bold: boldTitle }">{{ title }}</div>
       <div v-if="indicator" class="indicator">
         <span class="indicator-category"> {{ indicator.key }} </span>
-        <span class="indicator-level" :style="{ background: indicatorColor }">
+        <span
+          class="indicator-level"
+          :class="{ 'dark-text': useDarkIndicatorText }"
+          :style="{ background: indicatorColor }"
+        >
           {{ indicatorLevel }}
         </span>
       </div>
@@ -65,7 +69,7 @@ const props = defineProps({
 const { title, description, handleClick, indicator } = toRefs(props)
 
 const colorStore = useColorStore()
-const { stopLight: stopLightScheme } = storeToRefs(colorStore)
+const { stopLight: stopLightScheme, colorblindFriendly } = storeToRefs(colorStore)
 
 const indicatorLevel = computed(() => {
   if (indicator?.value.val === null) return 'no data'
@@ -78,6 +82,13 @@ const indicatorColor = computed(() => {
   if (indicatorLevel.value === 'no data') return stopLightScheme.value.default
   return stopLightScheme.value[indicatorLevel.value]
 })
+
+const useDarkIndicatorText = computed(() => {
+  return (
+    (indicatorLevel.value === 'low' && colorblindFriendly.value) ||
+    (indicatorLevel.value === 'medium' && !colorblindFriendly.value)
+  )
+})
 </script>
 
 <style scoped>
@@ -156,6 +167,10 @@ const indicatorColor = computed(() => {
   font-weight: 600;
 }
 
+.dark-text {
+  color: var(--gray);
+}
+
 .active {
   border-color: var(--ui-blue);
 }