diff --git a/src/components/tooltip/tooltip-checklist.module.scss b/src/components/tooltip/tooltip-checklist.module.scss
index 8342e3b9..75a95a3e 100644
--- a/src/components/tooltip/tooltip-checklist.module.scss
+++ b/src/components/tooltip/tooltip-checklist.module.scss
@@ -28,6 +28,6 @@
   }
 }
 
-.checked {
+.unchecked {
   color: $color-gray-200;
 }
diff --git a/src/components/tooltip/tooltip-checklist.tsx b/src/components/tooltip/tooltip-checklist.tsx
index d1ccf37b..eb403e83 100644
--- a/src/components/tooltip/tooltip-checklist.tsx
+++ b/src/components/tooltip/tooltip-checklist.tsx
@@ -16,7 +16,7 @@ const TooltipChecklist = ({ children, items }: Props) => {
   const content = (
     <ul className={styles.tooltipChecklist}>
       {items.map((item, i) => (
-        <li key={i} className={classNames(styles.checklistItem, { [styles.checked]: item.checked })}>
+        <li key={i} className={classNames(styles.checklistItem, { [styles.unchecked]: !item.checked })}>
           <img
             src={item.checked ? images.checkboxFilled : images.checkboxEmpty}
             alt={item.checked ? 'checked' : 'unchecked'}