diff --git a/components/calendar/__tests__/mini-calendar.test.tsx b/components/calendar/__tests__/mini-calendar.test.tsx
index 7fdf46f69..0bd995c96 100644
--- a/components/calendar/__tests__/mini-calendar.test.tsx
+++ b/components/calendar/__tests__/mini-calendar.test.tsx
@@ -85,6 +85,13 @@ describe('MiniCalendar', () => {
expect(document.activeElement).toBe(day(/October 5, 2026/));
});
+ it("draws other months' days in a colour that keeps text contrast, not a faded one", () => {
+ render();
+ const circle = day(/September 28, 2026/).firstElementChild!;
+ expect(circle.className).toContain('text-muted-foreground');
+ expect(circle.className).not.toMatch(/text-muted-foreground\/\d+/);
+ });
+
it('tells which month is selected in the month picker', () => {
render();
fireEvent.click(screen.getByRole('button', { name: /October 2026/ }));
diff --git a/components/calendar/calendar-month-view.tsx b/components/calendar/calendar-month-view.tsx
index fb6ed8b0b..0ff30c202 100644
--- a/components/calendar/calendar-month-view.tsx
+++ b/components/calendar/calendar-month-view.tsx
@@ -433,7 +433,7 @@ export function CalendarMonthView({
>
{firstOfMonth && (
-
+
{t(`months.${monthLabelKeys[getMonth(day)]}`)}
)}
@@ -456,7 +456,9 @@ export function CalendarMonthView({
isMobile ? "w-7 h-7 text-xs" : "w-6 h-6 text-xs",
today && "bg-primary text-primary-foreground font-bold",
selected && !today && "bg-primary/15 text-primary font-bold",
- !inMonth && !selected && !today && "text-muted-foreground/50",
+ // Readable at 4.5:1 like any text; the muted colour
+ // still sets other months apart.
+ !inMonth && !selected && !today && "text-muted-foreground",
inMonth && !selected && !today && "font-medium",
!today && !isMobile && "hover:bg-muted"
)}
diff --git a/components/calendar/mini-calendar.tsx b/components/calendar/mini-calendar.tsx
index 5fe39e4a6..93f2259e5 100644
--- a/components/calendar/mini-calendar.tsx
+++ b/components/calendar/mini-calendar.tsx
@@ -252,7 +252,7 @@ export function MiniCalendar({
{showWeekNumbers && (
{weekNumberOf(week[0])}
{t("mini_week_number", { week: weekNumberOf(week[0]) })}
@@ -281,7 +281,9 @@ export function MiniCalendar({
|