diff --git a/src/App.vue b/src/App.vue
index 6f3e9b8..7588385 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import { onMounted } from 'vue'
 import { usePrefeituraStore } from '@/stores/prefeituraStore'
 import { applyTemplate, applySurface } from '@/config/theme.config'
+import AccessibilityWidget from '@/components/common/AccessibilityWidget.vue'
 
 const prefeitura = usePrefeituraStore()
 
@@ -12,12 +13,9 @@ onMounted(() => {
 </script>
 
 <template>
-    <!-- Skip link: invisível até receber foco via Tab — permite ao usuário
-         de teclado pular a navegação e ir direto ao conteúdo principal -->
-    <a href="#main-content" class="skip-link">
-        Pular para o conteúdo principal
-    </a>
+    <a href="#main-content" class="skip-link">Pular para o conteúdo principal</a>
 
     <RouterView />
     <Toast />
+    <AccessibilityWidget />
 </template>
diff --git a/src/assets/layout/layout.scss b/src/assets/layout/layout.scss
index ab04dad..87771d4 100644
--- a/src/assets/layout/layout.scss
+++ b/src/assets/layout/layout.scss
@@ -25,21 +25,12 @@ body {
 
 /* ── Acessibilidade global ─────────────────────────────────────────── */
 
-/*
- * Focus ring visível e de alto contraste.
- * Usa currentColor para se adaptar a qualquer tema de cor.
- * Nunca remover — usuários de teclado e leitores de tela dependem disso.
- */
 :focus-visible {
     outline: 3px solid currentColor;
     outline-offset: 3px;
     border-radius: 4px;
 }
 
-/*
- * Skip link — oculto até receber foco via Tab.
- * Permite que usuários de teclado pulem a navegação e vão direto ao conteúdo.
- */
 .skip-link {
     position: fixed;
     top: -100%;
@@ -60,47 +51,14 @@ body {
     }
 }
 
-/*
- * Respeitar a preferência de usuário por menos movimento (vestibular,
- * epilepsia, sensibilidade visual). Afeta autoplay do carousel e transições.
- */
 @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
-
-    /* Garante que transições de rota também param */
     .page-enter-active,
     .page-leave-active {
         transition: none;
     }
 }
 
-/* ── Alvo de toque mínimo (WCAG 2.5.5) ────────────────────────────── */
-/*
- * Botões e links pequenos precisam de área clicável mínima de 44×44px
- * para usuários com dificuldade motora ou em telas touch.
- */
-button,
-[role='button'],
-a {
-    min-height: 44px;
-    display: inline-flex;
-    align-items: center;
-}
-
-/*
- * Exceção para elementos inline de parágrafo onde forçar altura quebra
- * o layout (links dentro de texto corrido).
- */
-p a,
-li a,
-.inline-link {
-    min-height: unset;
-    display: inline;
-}
+/* ── Widget de acessibilidade — classes dinâmicas ───────────────────── */
+html.a11y-font-lg  { font-size: 18px; }
+html.a11y-font-xl  { font-size: 20px; }
+html.a11y-contrast { filter: contrast(1.45) saturate(0.85); }
diff --git a/src/components/common/AccessibilityWidget.vue b/src/components/common/AccessibilityWidget.vue
new file mode 100644
index 0000000..6bec1e8
--- /dev/null
+++ b/src/components/common/AccessibilityWidget.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const aberto = ref(false)
+const nivelFonte = ref(0)   // 0 = normal, 1 = grande, 2 = extra-grande
+const altoContraste = ref(false)
+
+const opcoesFonte = [
+    { nivel: 0, label: 'A',   title: 'Texto normal' },
+    { nivel: 1, label: 'A+',  title: 'Texto grande' },
+    { nivel: 2, label: 'A++', title: 'Texto extra-grande' },
+]
+
+watch(nivelFonte, (val) => {
+    document.documentElement.classList.remove('a11y-font-lg', 'a11y-font-xl')
+    if (val === 1) document.documentElement.classList.add('a11y-font-lg')
+    if (val === 2) document.documentElement.classList.add('a11y-font-xl')
+}, { immediate: true })
+
+watch(altoContraste, (val) => {
+    document.documentElement.classList.toggle('a11y-contrast', val)
+})
+</script>
+
+<template>
+    <div class="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
+
+        <!-- Painel -->
+        <Transition
+            enter-active-class="transition-all duration-200 ease-out"
+            enter-from-class="opacity-0 translate-y-2 scale-95"
+            enter-to-class="opacity-100 translate-y-0 scale-100"
+            leave-active-class="transition-all duration-150 ease-in"
+            leave-from-class="opacity-100 translate-y-0 scale-100"
+            leave-to-class="opacity-0 translate-y-2 scale-95"
+        >
+            <div
+                v-if="aberto"
+                id="a11y-panel"
+                role="dialog"
+                aria-label="Opções de acessibilidade"
+                class="bg-white rounded-2xl shadow-2xl border border-slate-200 p-5 w-64 origin-bottom-right"
+            >
+                <div class="flex items-center gap-2 mb-4">
+                    <i class="pi pi-eye text-primary text-sm" aria-hidden="true" />
+                    <p class="text-xs font-bold text-slate-600 uppercase tracking-wide">Acessibilidade</p>
+                </div>
+
+                <!-- Tamanho do texto -->
+                <div class="mb-5">
+                    <p class="text-sm font-semibold text-slate-700 mb-2">Tamanho do texto</p>
+                    <div class="flex gap-2" role="group" aria-label="Escolha o tamanho do texto">
+                        <button
+                            v-for="op in opcoesFonte"
+                            :key="op.nivel"
+                            :title="op.title"
+                            :aria-pressed="nivelFonte === op.nivel"
+                            :class="[
+                                'flex-1 py-2 rounded-lg border text-sm font-bold transition-colors',
+                                nivelFonte === op.nivel
+                                    ? 'bg-primary text-white border-primary'
+                                    : 'bg-white text-slate-600 border-slate-200 hover:border-primary/40 hover:text-primary'
+                            ]"
+                            @click="nivelFonte = op.nivel"
+                        >
+                            {{ op.label }}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Alto contraste -->
+                <div class="flex items-center justify-between pt-4 border-t border-slate-100">
+                    <div>
+                        <p class="text-sm font-semibold text-slate-700">Alto contraste</p>
+                        <p class="text-xs text-slate-400 mt-0.5">Melhora a legibilidade</p>
+                    </div>
+                    <ToggleSwitch
+                        v-model="altoContraste"
+                        :aria-label="altoContraste ? 'Desativar alto contraste' : 'Ativar alto contraste'"
+                    />
+                </div>
+            </div>
+        </Transition>
+
+        <!-- Botão flutuante -->
+        <button
+            :class="[
+                'w-12 h-12 rounded-full shadow-lg border flex items-center justify-center transition-all hover:scale-105',
+                aberto
+                    ? 'bg-primary text-white border-primary shadow-primary/30'
+                    : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300 hover:shadow-xl'
+            ]"
+            :aria-label="aberto ? 'Fechar painel de acessibilidade' : 'Abrir painel de acessibilidade'"
+            :aria-expanded="aberto"
+            aria-controls="a11y-panel"
+            @click="aberto = !aberto"
+        >
+            <i class="pi pi-eye text-lg" aria-hidden="true" />
+        </button>
+
+    </div>
+</template>
diff --git a/src/views/public/HomeView.vue b/src/views/public/HomeView.vue
index 76ccd05..5ab5b4b 100644
--- a/src/views/public/HomeView.vue
+++ b/src/views/public/HomeView.vue
@@ -285,24 +285,20 @@ function continuar() {
                                 <i :class="['pi', aviso.icone, 'text-lg', corAviso[aviso.cor].icone]" />
                             </div>
                             <div class="flex-1 min-w-0">
-                                <div class="flex items-start justify-between gap-4">
-                                    <div>
-                                        <p class="font-semibold text-slate-800 text-sm">{{ aviso.titulo }}</p>
-                                        <p class="text-xs text-slate-600 mt-0.5 leading-relaxed">{{ aviso.descricao }}</p>
-                                    </div>
-                                    <RouterLink
-                                        v-if="aviso.acao"
-                                        :to="aviso.acao.to"
-                                        class="flex-shrink-0"
-                                    >
-                                        <Button
-                                            :label="aviso.acao.label"
-                                            size="small"
-                                            outlined
-                                            class="whitespace-nowrap"
-                                        />
-                                    </RouterLink>
-                                </div>
+                                <p class="font-semibold text-slate-800 text-sm">{{ aviso.titulo }}</p>
+                                <p class="text-xs text-slate-600 mt-0.5 leading-relaxed">{{ aviso.descricao }}</p>
+                                <RouterLink
+                                    v-if="aviso.acao"
+                                    :to="aviso.acao.to"
+                                    class="inline-block mt-3"
+                                >
+                                    <Button
+                                        :label="aviso.acao.label"
+                                        size="small"
+                                        outlined
+                                        class="whitespace-nowrap"
+                                    />
+                                </RouterLink>
                             </div>
                         </div>
                     </template>