diff --git a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
index b4aa87bc7..04094cc5f 100644
--- a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
+++ b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { Card } from '../../ui/card';
 import { Button } from '../../ui/button';
 import { useTheme } from '../../../components/theme/ThemeProvider';
-import { ThemeVariant } from '../../../types';
 import {
   Moon,
   Sun,
@@ -15,28 +14,79 @@ import {
 } from 'lucide-react';
 import { useToast } from '../../../components/feedback/ToastProvider';
 import { Switch } from '../../ui/switch';
+import { useAuth } from '@/features/auth/hooks/useAuth';
+import { userService } from '@/services/userService';
+
+const ACCENT_PRESETS = [
+  { id: 'indigo', hue: 220, hex: '#7c9dd6' },
+  { id: 'sage', hue: 120, hex: '#7a9e6c' },
+  { id: 'vermillion', hue: 15, hex: '#d4634a' },
+  { id: 'gold', hue: 45, hex: '#c9a84c' },
+  { id: 'sakura', hue: 340, hex: '#e0a0b8' },
+];
 
 export const AppearanceSettingsView: React.FC = () => {
-  const { theme, setTheme } = useTheme();
+  const {
+    theme,
+    setTheme,
+    contrast,
+    setContrast,
+    density,
+    setDensity,
+    accentHue,
+    setAccentHue,
+    fontSize,
+    setFontSize,
+  } = useTheme();
   const { addToast } = useToast();
-  const [density, setDensity] = useState<'comfortable' | 'compact' | 'cozy'>(
-    'comfortable',
-  );
-  const [fontSize, setFontSize] = useState(16);
-  const [accentColor, setAccentColor] = useState('cyan');
-  const [showSidebar, setShowSidebar] = useState(true);
+  const { isAuthenticated } = useAuth();
+  const [showSidebar, setShowSidebar] = React.useState(true);
 
-  const accents = [
-    { id: 'indigo', hex: '#7c9dd6' },
-    { id: 'sage', hex: '#7a9e6c' },
-    { id: 'vermillion', hex: '#d4634a' },
-    { id: 'gold', hex: '#c9a84c' },
-    { id: 'sakura', hex: '#e0a0b8' },
-  ];
+  const loadPreferences = useCallback(async () => {
+    if (!isAuthenticated) return;
+    try {
+      const prefs = await userService.getPreferences();
+      const themeVal = prefs.theme as 'dark' | 'light' | 'system';
+      if (themeVal && ['dark', 'light', 'system'].includes(themeVal)) {
+        setTheme(themeVal);
+      }
+      setContrast(prefs.contrast === 'high' ? 'high' : 'normal');
+      const densityVal = prefs.density as 'comfortable' | 'compact' | 'cozy';
+      if (densityVal && ['comfortable', 'compact', 'cozy'].includes(densityVal)) {
+        setDensity(densityVal);
+      }
+      setAccentHue(prefs.accentHue ?? 220);
+      setFontSize(Math.min(20, Math.max(14, prefs.fontSize ?? 16)));
+    } catch {
+      /* ignore, use local state */
+    }
+  }, [isAuthenticated, setTheme, setContrast, setDensity, setAccentHue, setFontSize]);
+
+  useEffect(() => {
+    loadPreferences();
+  }, [loadPreferences]);
+
+  const handleSave = async () => {
+    if (isAuthenticated) {
+      try {
+        await userService.updatePreferences({
+          theme,
+          contrast,
+          density,
+          accentHue,
+          fontSize,
+        });
+        addToast('Appearance settings saved', 'success');
+      } catch {
+        addToast('Failed to save preferences', 'error');
+      }
+    } else {
+      addToast('Appearance settings saved', 'success');
+    }
+  };
 
   return (
     <div className="space-y-8 animate-fadeIn max-w-4xl mx-auto pb-20">
-      {/* Header */}
       <div className="flex justify-between items-end border-b border-border/50 pb-6">
         <div>
           <h2 className="text-3xl font-heading font-bold text-foreground mb-2">
@@ -46,53 +96,36 @@ export const AppearanceSettingsView: React.FC = () => {
             Customize your visual experience.
           </p>
         </div>
-        <Button
-          variant="primary"
-          onClick={() => addToast('Appearance settings saved', 'success')}
-        >
+        <Button variant="primary" onClick={handleSave}>
           Save Changes
         </Button>
       </div>
 
-      {/* Theme Selection */}
+      {/* Theme + High Contrast */}
       <Card variant="default">
         <h3 className="text-lg font-bold text-foreground mb-6 flex items-center gap-2">
           <Palette className="w-5 h-5 text-muted-foreground" /> Theme
         </h3>
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
           {[
-            {
-              id: ThemeVariant.NEON,
-              label: 'Neon Dark',
-              icon: <Moon className="w-6 h-6" />,
-            },
-            {
-              id: ThemeVariant.LIGHT,
-              label: 'Light Mode',
-              icon: <Sun className="w-6 h-6" />,
-            },
-            {
-              id: ThemeVariant.GAMING,
-              label: 'High Contrast',
-              icon: <Monitor className="w-6 h-6" />,
-            },
+            { id: 'dark' as const, label: 'Neon Dark', icon: <Moon className="w-6 h-6" /> },
+            { id: 'light' as const, label: 'Light Mode', icon: <Sun className="w-6 h-6" /> },
+            { id: 'system' as const, label: 'System', icon: <Monitor className="w-6 h-6" /> },
           ].map((opt) => (
             <div
               key={opt.id}
-              onClick={() => {
-                const map: Record<ThemeVariant, 'dark' | 'light'> = {
-                  [ThemeVariant.NEON]: 'dark',
-                  [ThemeVariant.LIGHT]: 'light',
-                  [ThemeVariant.GAMING]: 'dark',
-                  [ThemeVariant.NATURE]: 'light',
-                  [ThemeVariant.TERMINAL]: 'dark', // Gaming treated as dark for now
-                };
-                setTheme(map[opt.id]);
+              role="button"
+              tabIndex={0}
+              onClick={() => setTheme(opt.id)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  setTheme(opt.id);
+                }
               }}
-              className={`
-                            cursor-pointer p-6 rounded-xl border-2 transition-all flex flex-col items-center gap-4 relative
-                            ${theme === opt.id ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-border'}
-                        `}
+              className={`cursor-pointer p-6 rounded-xl border-2 transition-all flex flex-col items-center gap-4 relative ${
+                theme === opt.id ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-border'
+              }`}
             >
               <div
                 className={`p-4 rounded-full ${theme === opt.id ? 'bg-primary text-black' : 'bg-muted text-muted-foreground'}`}
@@ -112,9 +145,21 @@ export const AppearanceSettingsView: React.FC = () => {
             </div>
           ))}
         </div>
+        <div className="flex items-center justify-between p-4 bg-card rounded-lg border border-border">
+          <div>
+            <div className="text-sm font-bold text-foreground">High Contrast</div>
+            <div className="text-xs text-muted-foreground">
+              WCAG AA compliant colors for better visibility
+            </div>
+          </div>
+          <Switch
+            checked={contrast === 'high'}
+            onCheckedChange={(checked) => setContrast(checked ? 'high' : 'normal')}
+          />
+        </div>
       </Card>
 
-      {/* Display Density */}
+      {/* Density + Typography */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         <Card variant="default">
           <h3 className="text-lg font-bold text-foreground mb-6 flex items-center gap-2">
@@ -122,35 +167,34 @@ export const AppearanceSettingsView: React.FC = () => {
           </h3>
           <div className="space-y-4">
             {[
-              {
-                id: 'comfortable',
-                label: 'Comfortable',
-                desc: 'More whitespace for readability',
-              },
-              { id: 'cozy', label: 'Cozy', desc: 'Balanced spacing' },
-              { id: 'compact', label: 'Compact', desc: 'Maximum data density' },
+              { id: 'comfortable' as const, label: 'Comfortable', desc: 'More whitespace for readability' },
+              { id: 'cozy' as const, label: 'Cozy', desc: 'Balanced spacing' },
+              { id: 'compact' as const, label: 'Compact', desc: 'Maximum data density' },
             ].map((opt) => (
               <div
                 key={opt.id}
-                onClick={() => setDensity(opt.id as 'comfortable' | 'compact' | 'cozy')}
-                className={`
-                                flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-all
-                                ${density === opt.id ? 'bg-primary/10 border-primary' : 'bg-card border-border hover:bg-muted/50'}
-                            `}
+                role="button"
+                tabIndex={0}
+                onClick={() => setDensity(opt.id)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setDensity(opt.id);
+                  }
+                }}
+                className={`flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-all ${
+                  density === opt.id ? 'bg-primary/10 border-primary' : 'bg-card border-border hover:bg-muted/50'
+                }`}
               >
                 <div
                   className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${density === opt.id ? 'border-destructive' : 'border-border'}`}
                 >
                   {density === opt.id && (
-                    <div className="w-2 h-2 rounded-full bg-destructive"></div>
+                    <div className="w-2 h-2 rounded-full bg-destructive" />
                   )}
                 </div>
                 <div>
-                  <div
-                    className={`text-sm font-bold ${density === opt.id ? 'text-foreground' : 'text-foreground'}`}
-                  >
-                    {opt.label}
-                  </div>
+                  <div className="text-sm font-bold text-foreground">{opt.label}</div>
                   <div className="text-xs text-muted-foreground">{opt.desc}</div>
                 </div>
               </div>
@@ -170,11 +214,12 @@ export const AppearanceSettingsView: React.FC = () => {
               </div>
               <input
                 type="range"
-                min="12"
+                min="14"
                 max="20"
                 value={fontSize}
                 onChange={(e) => setFontSize(Number(e.target.value))}
                 className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-warning [&::-webkit-slider-thumb]:rounded-full"
+                aria-label="Font size"
               />
               <div
                 className="mt-4 p-4 bg-card rounded border border-border text-foreground"
@@ -187,23 +232,32 @@ export const AppearanceSettingsView: React.FC = () => {
         </Card>
       </div>
 
-      {/* Colors & Layout */}
+      {/* Accent + Layout */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         <Card variant="default">
           <h3 className="text-lg font-bold text-foreground mb-6 flex items-center gap-2">
             <Palette className="w-5 h-5 text-success" /> Accent Color
           </h3>
           <div className="flex gap-4">
-            {accents.map((col) => (
+            {ACCENT_PRESETS.map((col) => (
               <div
                 key={col.id}
-                onClick={() => setAccentColor(col.id)}
-                className={`w-10 h-10 rounded-full cursor-pointer flex items-center justify-center transition-opacity hover:opacity-80 ring-2 ring-offset-2 ring-offset-background ${accentColor === col.id ? 'ring-white' : 'ring-transparent'}`}
+                role="button"
+                tabIndex={0}
+                onClick={() => setAccentHue(col.hue)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setAccentHue(col.hue);
+                  }
+                }}
+                className={`w-10 h-10 rounded-full cursor-pointer flex items-center justify-center transition-opacity hover:opacity-80 ring-2 ring-offset-2 ring-offset-background ${
+                  accentHue === col.hue ? 'ring-white' : 'ring-transparent'
+                }`}
                 style={{ backgroundColor: col.hex }}
+                aria-label={`Accent color ${col.id}`}
               >
-                {accentColor === col.id && (
-                  <Check className="w-5 h-5 text-black" />
-                )}
+                {accentHue === col.hue && <Check className="w-5 h-5 text-black" />}
               </div>
             ))}
           </div>
@@ -225,7 +279,7 @@ export const AppearanceSettingsView: React.FC = () => {
             </div>
             <Switch
               checked={showSidebar}
-              onChange={() => setShowSidebar(!showSidebar)}
+              onCheckedChange={() => setShowSidebar(!showSidebar)}
             />
           </div>
         </Card>
diff --git a/apps/web/src/mocks/handlers-misc.ts b/apps/web/src/mocks/handlers-misc.ts
index 09506fb3a..e4a0fe426 100644
--- a/apps/web/src/mocks/handlers-misc.ts
+++ b/apps/web/src/mocks/handlers-misc.ts
@@ -339,6 +339,47 @@ export const handlersMisc = [
     return HttpResponse.json({ success: true });
   }),
 
+  // v0.801: User appearance preferences (contrast, density, accentHue, fontSize)
+  http.get('*/api/v1/users/me/preferences', () => {
+    return HttpResponse.json({
+      success: true,
+      data: {
+        user_id: 'user-1',
+        theme: 'dark',
+        language: 'en',
+        timezone: 'UTC',
+        notifications: {},
+        privacy: {},
+        audio: {},
+        contrast: 'normal',
+        density: 'comfortable',
+        accentHue: 220,
+        fontSize: 16,
+        updated_at: new Date().toISOString(),
+      },
+    });
+  }),
+  http.put('*/api/v1/users/me/preferences', async ({ request }) => {
+    const body = (await request.json()) as Record<string, unknown>;
+    return HttpResponse.json({
+      success: true,
+      data: {
+        user_id: 'user-1',
+        theme: body.theme ?? 'dark',
+        language: body.language ?? 'en',
+        timezone: body.timezone ?? 'UTC',
+        notifications: body.notifications ?? {},
+        privacy: body.privacy ?? {},
+        audio: body.audio ?? {},
+        contrast: body.contrast ?? 'normal',
+        density: body.density ?? 'comfortable',
+        accentHue: body.accentHue ?? 220,
+        fontSize: body.fontSize ?? 16,
+        updated_at: new Date().toISOString(),
+      },
+    });
+  }),
+
   http.get('*/api/v1/users/by-username/:username', ({ params }) => {
     if (params.username === 'notfound') {
       return HttpResponse.json({ message: 'User not found' }, { status: 404 });
diff --git a/apps/web/src/services/userService.ts b/apps/web/src/services/userService.ts
index 9fc85a7c1..22ff237a8 100644
--- a/apps/web/src/services/userService.ts
+++ b/apps/web/src/services/userService.ts
@@ -112,6 +112,44 @@ export const userService = {
     return response.data;
   },
 
+  /**
+   * Récupère les préférences de l'utilisateur connecté (v0.801: appearance)
+   */
+  getPreferences: async () => {
+    const response = await apiClient.get<{
+      user_id: string;
+      theme: string;
+      language: string;
+      timezone: string;
+      contrast: string;
+      density: string;
+      accentHue: number;
+      fontSize: number;
+    }>('/users/me/preferences');
+    return response.data;
+  },
+
+  /**
+   * Met à jour les préférences de l'utilisateur connecté (v0.801: appearance)
+   */
+  updatePreferences: async (data: {
+    theme?: string;
+    contrast?: string;
+    density?: string;
+    accentHue?: number;
+    fontSize?: number;
+  }) => {
+    const response = await apiClient.put<{
+      user_id: string;
+      theme: string;
+      contrast: string;
+      density: string;
+      accentHue: number;
+      fontSize: number;
+    }>('/users/me/preferences', data);
+    return response.data;
+  },
+
   /**
    * Exporte les données de l'utilisateur (GDPR)
    */