diff --git a/src/components/Board/Board.scss b/src/components/Board/Board.scss
index 55df0ec137..54390b9994 100644
--- a/src/components/Board/Board.scss
+++ b/src/components/Board/Board.scss
@@ -68,6 +68,12 @@
 }
 
 [theme="dark"] {
+  .board__spacer-left {
+    @include inset-border($top: true, $left: true, $bottom: true, $color: var(--accent-color--400));
+  }
+  .board__spacer-right {
+    @include inset-border($top: true, $right: true, $bottom: true, $color: var(--accent-color--400));
+  }
   .board__spacer-left:nth-child(odd),
   .board__spacer-right:nth-child(odd) {
     background-color: $navy--600;
diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
index 06663d622d..21192b60da 100644
--- a/src/components/ColorPicker/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -56,22 +56,30 @@
       }
     }
   }
+
+  .color-picker__color-option {
+    background-color: var(--accent-color--400);
+  }
 }
 
 .color-picker__color-option {
   width: 24px;
   height: 24px;
   border-radius: $rounded--full;
-  background-color: var(--accent-color--400);
+  background-color: var(--accent-color--500);
   border: 3px solid $gray--300;
 
+  transition: 0.12s ease-out;
+  transition-property: background-color, border, transform;
+
   &--selected {
-    background-color: var(--accent-color--400);
+    background-color: var(--accent-color--500);
     border: 3px solid var(--accent-color--200);
   }
 
   &:hover,
   &:focus-visible {
+    transform: scale(1.1);
     background-color: var(--accent-color--400);
     border: 3px solid var(--accent-color--100);
   }
@@ -87,6 +95,7 @@
 
     &:hover,
     &:focus-visible {
+      transform: scale(1.1);
       border: 3px solid var(--accent-color--100);
     }
   }
diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
index 007e9c08ee..c6ff6b8e31 100644
--- a/src/components/Column/Column.scss
+++ b/src/components/Column/Column.scss
@@ -44,7 +44,7 @@
   flex-direction: column;
   flex: 1;
   ::selection {
-    background-color: rgba(var(--accent-color--light-rgb), 0.5);
+    background-color: rgba(var(--accent-color--400-rgb), 0.5);
   }
 }
 
@@ -72,7 +72,7 @@
   justify-content: space-between;
   width: auto;
   height: auto;
-  border-bottom: solid 3px var(--accent-color--light);
+  border-bottom: solid 3px var(--accent-color--400);
   margin: 0 $spacing--xs 0 0;
   overflow: hidden;
 }
@@ -109,7 +109,7 @@
   border: none;
   font-size: calc(#{$text-size--large} + 0.4vw);
   color: $navy--900;
-  border-bottom: dashed 3px var(--accent-color--light);
+  border-bottom: dashed 3px var(--accent-color--400);
   margin: 0 auto 0 0;
   font-weight: bold;
   letter-spacing: $letter-spacing--large;
@@ -150,8 +150,8 @@
 }
 
 .column__notes-wrapper.isOver {
-  border-color: var(--accent-color--light);
-  background-color: rgba(var(--accent-color--light-rgb), 0.2);
+  border-color: var(--accent-color--400);
+  background-color: rgba(var(--accent-color--400-rgb), 0.2);
 }
 
 .column__note-list {
@@ -167,6 +167,10 @@
 }
 
 [theme="dark"] {
+  .column {
+    @include inset-border($top: true, $bottom: true, $color: var(--accent-color--400));
+  }
+
   .column__header-text {
     color: $gray--000;
   }
@@ -220,8 +224,8 @@
   &:hover > svg,
   &:focus-visible > svg {
     transform: translate(-0.64px, -0.64px);
-    filter: drop-shadow(2px 2px 2px rgba(var(--accent-color--light-rgb), 0.24));
-    color: var(--accent-color--light);
+    filter: drop-shadow(2px 2px 2px rgba(var(--accent-color--400-rgb), 0.24));
+    color: var(--accent-color--400);
   }
 }
 
diff --git a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
index ff2434e4b6..eb5af82d70 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -568,8 +568,10 @@ exports[`Column should have correct style show column with correct style 1`] = `
                   role="none"
                 >
                   <button
+                    aria-label="Remove vote"
                     class="dot-button vote-button-remove"
-                    title="Remove vote"
+                    data-tooltip-content="Remove vote"
+                    data-tooltip-id="scrumlr-tooltip"
                   >
                     <span
                       class="vote-button-remove__folded-corner"
@@ -586,9 +588,11 @@ exports[`Column should have correct style show column with correct style 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-label="Multiple votes are not allowed"
                     class="dot-button vote-button-add"
+                    data-tooltip-content="Multiple votes are not allowed"
+                    data-tooltip-id="scrumlr-tooltip"
                     disabled=""
-                    title="Add vote"
                   >
                     <svg
                       class="vote-button-add__icon"
@@ -1149,8 +1153,10 @@ exports[`Column should have correct style show column with correct style 1`] = `
                   role="none"
                 >
                   <button
+                    aria-label="Add vote"
                     class="dot-button vote-button-add"
-                    title="Add vote"
+                    data-tooltip-content="Add vote"
+                    data-tooltip-id="scrumlr-tooltip"
                   >
                     <svg
                       class="vote-button-add__icon"
diff --git a/src/components/DotButton/DotButton.tsx b/src/components/DotButton/DotButton.tsx
index 4fea2cb356..81c0527b12 100644
--- a/src/components/DotButton/DotButton.tsx
+++ b/src/components/DotButton/DotButton.tsx
@@ -6,8 +6,9 @@ type DotButtonProps = {
   className?: string;
   disabled?: boolean;
   onClick?: () => void;
-  title?: string;
   onAnimationEnd?: () => void;
+  dataTooltipId?: string;
+  dataTooltipContent?: string;
 };
 
 export const DotButton: FC<PropsWithChildren<DotButtonProps>> = (props) => (
@@ -18,8 +19,10 @@ export const DotButton: FC<PropsWithChildren<DotButtonProps>> = (props) => (
       e.stopPropagation();
       props.onClick?.();
     }}
-    title={props.title}
+    aria-label={props.dataTooltipContent}
     onAnimationEnd={props.onAnimationEnd}
+    data-tooltip-id={props.dataTooltipId}
+    data-tooltip-content={props.dataTooltipContent}
   >
     {props.children}
   </button>
diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
index 917b574b54..b4d266976f 100644
--- a/src/components/Note/Note.tsx
+++ b/src/components/Note/Note.tsx
@@ -108,7 +108,7 @@ export const Note = (props: NoteProps) => {
           <div data-clarity-mask="True" className="note__author-container">
             <NoteAuthorList authors={authors} authorID={note.author} showAuthors={showAuthors} viewer={props.viewer} />
           </div>
-          <Votes noteId={props.noteId!} aggregateVotes />
+          <Votes noteId={props.noteId!} aggregateVotes colorClassName={props.colorClassName} />
         </header>
         {isImage ? (
           <div className="note__image-wrapper">
diff --git a/src/components/Note/NoteAuthorList/NoteAuthorList.scss b/src/components/Note/NoteAuthorList/NoteAuthorList.scss
index 64da017093..f8a97b17fc 100644
--- a/src/components/Note/NoteAuthorList/NoteAuthorList.scss
+++ b/src/components/Note/NoteAuthorList/NoteAuthorList.scss
@@ -112,7 +112,7 @@ $max-name-length: 112px;
 
 [theme="dark"] {
   .note-author__container--self {
-    background: rgba(var(--accent-color--dark-rgb), 0.6);
+    background: rgba(var(--accent-color--dark-rgb), 0.32);
   }
 
   .note__author-name {
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
index f122e257b2..97cbdd6c18 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
@@ -7,8 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(var(--accent-color--light-rgb), 0.2);
-  color: var(--accent-color--light);
+  color: var(--accent-color--600);
   transition:
     background-color 150ms ease-in-out,
     color 150ms ease-in-out;
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
index ff44295db5..060823ca90 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
@@ -19,16 +19,13 @@
   width: 32px;
   padding: 0;
   border: 0;
-  color: var(--accent-color--light);
-  background-color: var(--accent-color--100);
+  color: var(--accent-color--600);
+  background-color: transparent;
   border-radius: $rounded--full;
   cursor: pointer;
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
-  box-shadow:
-    0 1px 3px 0 rgba(var(--accent-color--light-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
 
   > svg {
     height: 100%;
@@ -36,9 +33,9 @@
   }
 
   &:hover {
-    background-color: var(--accent-color--light);
-    color: $gray--000;
+    color: var(--accent-color--500);
   }
+
   &:focus-visible {
     outline: 2px solid var(--accent-color--light);
   }
@@ -46,13 +43,12 @@
 
 [theme="dark"] {
   .note-option__button {
-    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
-    color: var(--accent-color--dark);
+    color: var(--accent-color--400);
 
     &:hover {
-      background-color: var(--accent-color--light);
-      color: $gray--000;
+      color: var(--accent-color--300);
     }
+
     &:focus-visible {
       outline: 2px solid rgba(var(--accent-color--dark-rgb), 0.6);
     }
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss b/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
index f8298e002e..08756d185b 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
@@ -22,7 +22,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-
+  padding-bottom: $spacing--base;
   gap: $spacing--base;
 }
 
diff --git a/src/components/NoteInput/NoteInput.scss b/src/components/NoteInput/NoteInput.scss
index f6fb6c288c..cda38606db 100644
--- a/src/components/NoteInput/NoteInput.scss
+++ b/src/components/NoteInput/NoteInput.scss
@@ -84,7 +84,7 @@ $note-input__input-right: 40px;
 .note-input__icon--add {
   width: $icon--large;
   height: $icon--large;
-  color: var(--accent-color--light);
+  color: var(--accent-color--600);
   align-self: center;
   transition: all 0.08s ease-out;
 }
@@ -133,6 +133,10 @@ $note-input__input-right: 40px;
   .note-input__input {
     color: $gray--000;
   }
+
+  .note-input__icon--add {
+    color: var(--accent-color--400);
+  }
 }
 
 @keyframes fade-in {
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.scss b/src/components/Votes/VoteButtons/AddVoteButton.scss
index eca823af30..1642f8b5af 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.scss
+++ b/src/components/Votes/VoteButtons/AddVoteButton.scss
@@ -10,16 +10,24 @@
   width: 32px;
 
   background-color: var(--accent-color--100);
-  color: var(--accent-color--light);
+  color: var(--accent-color--600);
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
-  box-shadow:
-    0 1px 3px 0 rgba(var(--accent-color--light-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
-}
-.vote-button-add:disabled {
-  opacity: 0.5;
+
+  &:enabled:hover {
+    background-color: var(--accent-color--light);
+    color: $gray--000;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
+  }
+
+  &:disabled {
+    background-color: $gray--200;
+    color: $gray--600;
+  }
 }
 
 .vote-button-add__icon {
@@ -28,22 +36,23 @@
   color: inherit;
   pointer-events: none;
 }
-.vote-button-add:enabled:hover {
-  background-color: var(--accent-color--light);
-  color: $gray--000;
-}
-.vote-button-add:focus-visible {
-  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
-}
 
 [theme="dark"] {
   .vote-button-add {
-    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
-    color: var(--accent-color--dark);
-    filter: drop-shadow(0 3px 4px rgba($navy--900, 0.16));
+    color: var(--accent-color--500);
+    background-color: rgba(var(--accent-color--400-rgb), 0.24);
+
+    &--high-contrast {
+      color: var(--accent-color--200);
+    }
 
     &:enabled:hover {
       background-color: var(--accent-color--dark);
     }
+
+    &:disabled {
+      background-color: $navy--300;
+      color: $navy--100;
+    }
   }
 }
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.tsx b/src/components/Votes/VoteButtons/AddVoteButton.tsx
index 0af493f79b..5b27933c16 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/AddVoteButton.tsx
@@ -5,13 +5,12 @@ import {Plus} from "components/Icon";
 import "./AddVoteButton.scss";
 import {useAppDispatch} from "store";
 import {addVote} from "store/features";
+import classNames from "classnames";
+import {needsHighContrast} from "constants/colors";
 
-type AddVoteProps = {
-  noteId: string;
-  disabled: boolean;
-};
+type AddVoteProps = {noteId: string; disabled: boolean; disabledReason?: string; colorClassName?: string};
 
-export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled}) => {
+export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled, disabledReason, colorClassName}) => {
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
 
@@ -20,7 +19,13 @@ export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled}) => {
   };
 
   return (
-    <DotButton title={t("Votes.AddVote")} className="vote-button-add" onClick={dispatchAddVote} disabled={disabled}>
+    <DotButton
+      className={classNames("vote-button-add", {"vote-button-add--high-contrast": needsHighContrast(colorClassName)})}
+      onClick={dispatchAddVote}
+      disabled={disabled}
+      dataTooltipId="scrumlr-tooltip"
+      dataTooltipContent={!disabled ? t("Votes.AddVote") : disabledReason}
+    >
       <Plus className="vote-button-add__icon" />
     </DotButton>
   );
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.scss b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
index 25ebe93b7f..909d518045 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.scss
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
@@ -10,38 +10,41 @@
   align-items: center;
   overflow: hidden;
   background-color: var(--accent-color--100);
-  color: var(--accent-color--light);
+  color: var(--accent-color--600);
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
-  box-shadow:
-    0 1px 3px 0 rgba(var(--accent-color--light-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
-}
 
-.vote-button-remove:disabled {
-  cursor: default;
-}
-
-.vote-button-remove:active {
-  transform: none;
-}
-
-.vote-button-remove:enabled:hover {
-  background-color: var(--accent-color--light);
-  color: $gray--000;
-  .vote-button-remove__count {
-    display: none;
+  &:disabled {
+    cursor: default;
   }
-  .vote-button-remove__icon {
-    display: block;
+
+  &:active {
+    transform: none;
   }
-}
 
-.vote-button-remove:focus-visible {
-  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
-  .vote-button-remove__icon {
-    display: block;
+  &:enabled {
+    &:focus-visible {
+      outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
+    }
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--accent-color--light);
+      color: $gray--000;
+
+      .vote-button-remove__count {
+        display: none;
+      }
+
+      .vote-button-remove__icon {
+        display: block;
+      }
+
+      > .vote-button-remove__folded-corner {
+        border-width: 12px 0 0 12px;
+      }
+    }
   }
 }
 
@@ -52,7 +55,7 @@
 }
 
 .bump {
-  animation: bump 0.2s linear;
+  animation: bump 0.2s ease-out;
 }
 
 @keyframes bump {
@@ -85,15 +88,14 @@
   transition: border-width 0.15s ease-in-out;
 }
 
-.vote-button-remove:enabled:hover > .vote-button-remove__folded-corner {
-  border-width: 12px 0 0 12px;
-}
-
 [theme="dark"] {
   .vote-button-remove {
-    color: $gray--000;
-    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
-    filter: drop-shadow(0 3px 4px rgba($navy--900, 0.16));
+    color: var(--accent-color--500);
+    background-color: rgba(var(--accent-color--400-rgb), 0.24);
+
+    &--high-contrast {
+      color: var(--accent-color--200);
+    }
 
     &:enabled:hover {
       background-color: var(--accent-color--dark);
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
index 71d91613f5..a173ef82ad 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
@@ -6,14 +6,16 @@ import {Minus} from "components/Icon";
 import "./RemoveVoteButton.scss";
 import {useAppDispatch} from "store";
 import {deleteVote} from "store/features";
+import {needsHighContrast} from "constants/colors";
 
 type RemoveVoteProps = {
   noteId: string;
   disabled?: boolean;
   numberOfVotes: number;
+  colorClassName?: string;
 };
 
-export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberOfVotes}) => {
+export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberOfVotes, colorClassName}) => {
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
 
@@ -34,13 +36,14 @@ export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberO
 
   return (
     <DotButton
-      title={disabled ? t("Votes.VotesOnNote", {votes: numberOfVotes}) : t("Votes.RemoveVote")}
-      className={classNames("vote-button-remove", {bump: doBump})}
+      className={classNames("vote-button-remove", {bump: doBump}, colorClassName && needsHighContrast(colorClassName) && "vote-button-remove--high-contrast")}
       disabled={disabled}
       onClick={dispatchDeleteVote}
       onAnimationEnd={() => {
         setDoBump(false);
       }}
+      dataTooltipId="scrumlr-tooltip"
+      dataTooltipContent={disabled ? t("Votes.VotesOnNote", {count: numberOfVotes}) : t("Votes.RemoveVote")}
     >
       <span className="vote-button-remove__folded-corner" />
       <Minus className="vote-button-remove__icon" />
diff --git a/src/components/Votes/Votes.tsx b/src/components/Votes/Votes.tsx
index 37f304c5f9..10d7da5f79 100644
--- a/src/components/Votes/Votes.tsx
+++ b/src/components/Votes/Votes.tsx
@@ -1,4 +1,5 @@
 import {FC} from "react";
+import {useTranslation} from "react-i18next";
 import classNames from "classnames";
 import _ from "underscore";
 import {useAppSelector} from "store";
@@ -10,9 +11,12 @@ type VotesProps = {
   noteId: string;
   // Aggregate the votes of the child notes
   aggregateVotes?: boolean;
+  colorClassName?: string;
 };
 
 export const Votes: FC<VotesProps> = (props) => {
+  const {t} = useTranslation();
+
   const voting = useAppSelector((state) => state.votings.open);
   const ongoingVotes = useAppSelector(
     (state) => ({
@@ -31,6 +35,19 @@ export const Votes: FC<VotesProps> = (props) => {
   const isModerator = useAppSelector((state) => ["OWNER", "MODERATOR"].some((role) => role === state.participants!.self?.role));
   const boardLocked = useAppSelector((state) => state.board.data!.isLocked);
 
+  const addVotesDisabledReason = (): string => {
+    if (!voting) return "";
+
+    if (ongoingVotes.total === voting.voteLimit) {
+      return t("Votes.VoteLimitReached");
+    }
+    if (ongoingVotes.note > 0 && !voting.allowMultipleVotes) {
+      return t("Votes.MultipleVotesNotAllowed");
+    }
+
+    return "";
+  };
+
   /**
    * If there's no active voting going on and there are no casted votes for
    * this note from previous votings, we don't need to render anything.
@@ -42,11 +59,18 @@ export const Votes: FC<VotesProps> = (props) => {
   return voting || allPastVotes > 0 ? (
     <div role="none" className={classNames("votes", props.className)} onClick={(e) => e.stopPropagation()}>
       {/* standard display for votes */}
-      {!voting && allPastVotes > 0 && <VoteButtons.Remove noteId={props.noteId} numberOfVotes={allPastVotes} disabled />}
+      {!voting && allPastVotes > 0 && <VoteButtons.Remove noteId={props.noteId} numberOfVotes={allPastVotes} disabled colorClassName={props.colorClassName} />}
       {/* display for votes when voting is open */}
-      {voting && ongoingVotes.note > 0 && <VoteButtons.Remove disabled={boardLocked && !isModerator} noteId={props.noteId} numberOfVotes={ongoingVotes.note} />}
+      {voting && ongoingVotes.note > 0 && (
+        <VoteButtons.Remove disabled={boardLocked && !isModerator} noteId={props.noteId} numberOfVotes={ongoingVotes.note} colorClassName={props.colorClassName} />
+      )}
       {voting && (isModerator || !boardLocked) && (
-        <VoteButtons.Add noteId={props.noteId} disabled={ongoingVotes.total === voting.voteLimit || (ongoingVotes.note > 0 && !voting.allowMultipleVotes)} />
+        <VoteButtons.Add
+          noteId={props.noteId}
+          disabled={ongoingVotes.total === voting.voteLimit || (ongoingVotes.note > 0 && !voting.allowMultipleVotes)}
+          disabledReason={addVotesDisabledReason()}
+          colorClassName={props.colorClassName}
+        />
       )}
     </div>
   ) : null;
diff --git a/src/components/Votes/__tests__/Votes.test.tsx b/src/components/Votes/__tests__/Votes.test.tsx
index 9f41e71ac2..a0a1c67f86 100644
--- a/src/components/Votes/__tests__/Votes.test.tsx
+++ b/src/components/Votes/__tests__/Votes.test.tsx
@@ -90,8 +90,8 @@ describe("Votes", () => {
 
     expect(screen.queryByTitle(i18n.t("Votes.AddVote"))).not.toBeInTheDocument();
     expect(screen.queryByTitle(i18n.t("Votes.RemoveVote"))).not.toBeInTheDocument();
-    expect(screen.queryByTitle(i18n.t("Votes.VotesOnNote", {votes: 1}))).toBeInTheDocument();
-    expect(screen.queryByTitle(i18n.t("Votes.VotesOnNote", {votes: 1}))).toBeDisabled();
+    expect(screen.queryByLabelText(i18n.t("Votes.VotesOnNote", {count: 1}))).toBeInTheDocument();
+    expect(screen.queryByLabelText(i18n.t("Votes.VotesOnNote", {count: 1}))).toBeDisabled();
   });
 
   it("add vote button should be visible and remove vote button not disabled on locked board if participant is moderator", () => {
@@ -115,12 +115,16 @@ describe("Votes", () => {
           others: [],
           focusInitiator: undefined,
         },
+        votings: {
+          open: getTestVoting({allowMultipleVotes: true}),
+          past: [],
+        },
       })
     );
 
-    expect(screen.getByTitle(i18n.t("Votes.AddVote"))).toBeInTheDocument();
-    expect(screen.queryByTitle(i18n.t("Votes.RemoveVote"))).toBeInTheDocument();
-    expect(screen.queryByTitle(i18n.t("Votes.RemoveVote"))).not.toBeDisabled();
-    expect(screen.queryByTitle(i18n.t("Votes.VotesOnNote", {votes: 1}))).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(i18n.t("Votes.AddVote"))).toBeInTheDocument();
+    expect(screen.queryByLabelText(i18n.t("Votes.RemoveVote"))).toBeInTheDocument();
+    expect(screen.queryByLabelText(i18n.t("Votes.RemoveVote"))).not.toBeDisabled();
+    expect(screen.queryByLabelText(i18n.t("Votes.VotesOnNote", {count: 1}))).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap b/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
index 6fb09491a4..2ee839427f 100644
--- a/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
+++ b/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
@@ -7,8 +7,10 @@ exports[`Votes should render correctly with no votes and active voting 1`] = `
     role="none"
   >
     <button
+      aria-label="Add vote"
       class="dot-button vote-button-add"
-      title="Add vote"
+      data-tooltip-content="Add vote"
+      data-tooltip-id="scrumlr-tooltip"
     >
       <svg
         class="vote-button-add__icon"
@@ -29,8 +31,10 @@ exports[`Votes should render correctly with votes and active voting 1`] = `
     role="none"
   >
     <button
+      aria-label="Remove vote"
       class="dot-button vote-button-remove"
-      title="Remove vote"
+      data-tooltip-content="Remove vote"
+      data-tooltip-id="scrumlr-tooltip"
     >
       <span
         class="vote-button-remove__folded-corner"
@@ -47,9 +51,11 @@ exports[`Votes should render correctly with votes and active voting 1`] = `
       </span>
     </button>
     <button
+      aria-label="Multiple votes are not allowed"
       class="dot-button vote-button-add"
+      data-tooltip-content="Multiple votes are not allowed"
+      data-tooltip-id="scrumlr-tooltip"
       disabled=""
-      title="Add vote"
     >
       <svg
         class="vote-button-add__icon"
@@ -68,9 +74,11 @@ exports[`Votes should render correctly with votes and disabled voting 1`] = `
     role="none"
   >
     <button
+      aria-label="1 vote"
       class="dot-button vote-button-remove"
+      data-tooltip-content="1 vote"
+      data-tooltip-id="scrumlr-tooltip"
       disabled=""
-      title="1 vote(s)"
     >
       <span
         class="vote-button-remove__folded-corner"
diff --git a/src/constants/colors.scss b/src/constants/colors.scss
index bc97345d66..211b5cfcea 100644
--- a/src/constants/colors.scss
+++ b/src/constants/colors.scss
@@ -53,14 +53,14 @@ $green--200: #a4eecb;
 $green--100: #d1f6e5;
 
 // yellow
-$yellow--800: #666200;
-$yellow--700: #999300;
-$yellow--600: #ccc400;
-$yellow--500: #fff500; // primary light
-$yellow--400: #fff733; // primary dark
-$yellow--300: #fff966;
-$yellow--200: #fffb99;
-$yellow--100: #fffdcc;
+$yellow--800: #9f7b00;
+$yellow--700: #bf9400;
+$yellow--600: #dfad00;
+$yellow--500: #fbd40c; // primary light
+$yellow--400: #fcde48; // primary dark
+$yellow--300: #fde985;
+$yellow--200: #fef4c2;
+$yellow--100: #fef9e0;
 
 // orange
 $orange--800: #664300;
diff --git a/src/constants/colors.ts b/src/constants/colors.ts
index f43f059c70..da7dbfe0da 100644
--- a/src/constants/colors.ts
+++ b/src/constants/colors.ts
@@ -11,3 +11,6 @@ export function formatColorName(input: string): string {
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(" ");
 }
+
+export const needsHighContrast = (color: string | undefined): boolean =>
+  color !== undefined && [getColorClassName("backlog-blue"), getColorClassName("value-violet")].includes(color);
diff --git a/src/i18n/de/translation.json b/src/i18n/de/translation.json
index 4d27b1bad0..e286bdb4df 100644
--- a/src/i18n/de/translation.json
+++ b/src/i18n/de/translation.json
@@ -672,7 +672,10 @@
   "Votes": {
     "AddVote": "Stimme hinzufügen",
     "RemoveVote": "Stimme entfernen",
-    "VotesOnNote": "{{votes}} Stimme(n)"
+    "VotesOnNote_one": "{{count}} Stimme",
+    "VotesOnNote_other": "{{count}} Stimmen",
+    "VoteLimitReached": "Maximale Anzahl an Stimmen erreicht",
+    "MultipleVotesNotAllowed": "Mehrfachabstimmung nicht erlaubt"
   },
   "Snowfall": {
     "toastTitle": "Frohe Feiertage 🎄",
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 8222289bcc..282c8ad9d5 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -672,7 +672,10 @@
   "Votes": {
     "AddVote": "Add vote",
     "RemoveVote": "Remove vote",
-    "VotesOnNote": "{{votes}} vote(s)"
+    "VotesOnNote_one": "{{count}} vote",
+    "VotesOnNote_other": "{{count}} votes",
+    "VoteLimitReached": "Maximum number of votes reached",
+    "MultipleVotesNotAllowed": "Multiple votes are not allowed"
   },
   "Snowfall": {
     "toastTitle": "Happy Holidays 🎄",