diff --git a/web/components/answers/answer-compatibility-question-content.tsx b/web/components/answers/answer-compatibility-question-content.tsx
index 106b85fe..d4534f14 100644
--- a/web/components/answers/answer-compatibility-question-content.tsx
+++ b/web/components/answers/answer-compatibility-question-content.tsx
@@ -36,10 +36,10 @@ type ImportanceColorsType = {
 }
 
 export const IMPORTANCE_RADIO_COLORS: ImportanceColorsType = {
-  0: `bg-stone-400 ring-stone-400 dark:bg-stone-500 dark:ring-stone-500`,
-  1: `bg-teal-200 ring-teal-200 dark:bg-teal-100 dark:ring-teal-100 `,
-  2: `bg-teal-300 ring-teal-300 dark:bg-teal-200 dark:ring-teal-200 `,
-  3: `bg-teal-400 ring-teal-400`,
+  0: `bg-teal-300 ring-teal-200`,
+  1: `bg-teal-500 ring-teal-200`,
+  2: `bg-teal-700 ring-teal-300`,
+  3: `bg-teal-900 ring-teal-400`,
 }
 
 export const IMPORTANCE_DISPLAY_COLORS: ImportanceColorsType = {
diff --git a/web/components/widgets/radio-toggle-group.tsx b/web/components/widgets/radio-toggle-group.tsx
index 10d8f2b3..f3541048 100644
--- a/web/components/widgets/radio-toggle-group.tsx
+++ b/web/components/widgets/radio-toggle-group.tsx
@@ -27,7 +27,7 @@ export function RadioToggleGroup(props: {
 
   const length = orderedChoicesMap.length
   return (
-    <Row className="text-ink-300 dark:text-ink-600 mb-6 items-center gap-3 text-sm">
+    <Row className="text-ink-500 dark:text-ink-500 mb-6 items-center gap-3 text-sm">
       {orderedChoicesMap[0][0]}
       <RadioGroup
         className={clsx(