焦點外框樣式產生器
在本機設計 CSS 焦點外框、對照父層裁切與色彩對比，匯出含強制色彩備援的 CSS。
focus-ring-styler本機處理
正在啟用本機工具…
焦點外框設定
設定只留本頁記憶體；不傳送、儲存或寫入網址。靜態來源日期：2026-11-10。
互動預覽與 CSS
- 外框／頁面對比
- 5.57:1
- 外框／元件對比
- 5.57:1
這是指定不透明色彩的對比計算，不是 WCAG 合規判定。請另查實際外框面積、虛線空隙、周圍背景與遮擋情形。焦點外觀準則 2.4.13 為 AAA，不能只由對比數字判為 AA 通過。
將 focus-target class 加至目標元件。陰影間距使用指定的頁面色彩；輸出包含 forced-colors 可見外框備援。
比較焦點外框裁切
虛線標出父層。兩個示意盒都使用 2px 父層內距，只有 overflow 不同。正偏移可能把外框移到裁切範圍外；負偏移則把外框往內移。請在實際頁面按 Tab 確認焦點仍清楚可見。
強制色彩模式下不顯示裁切對照；請使用上方的鍵盤預覽檢查焦點。
overflow: visible · 保留溢出overflow: hidden · 裁掉溢出預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
.focus-target:focus-visible {
outline: 3px solid #0066CC;
outline-offset: 2px;
border-radius: 12px;
}
@media (forced-colors: active) {
.focus-target:focus-visible {
outline: 3px solid CanvasText;
outline-offset: 2px;
box-shadow: none;
}
}展開可選取的完整文字
.focus-target:focus-visible {
outline: 3px solid #0066CC;
outline-offset: 2px;
border-radius: 12px;
}
@media (forced-colors: active) {
.focus-target:focus-visible {
outline: 3px solid CanvasText;
outline-offset: 2px;
box-shadow: none;
}
}如何使用這個工具
選擇預設，以 Tab 聚焦預覽按鈕，再展開裁切對照，看看父層使用 overflow: hidden 時有什麼差異。複製 CSS 後，將 focus-target class 套用至目標元件。
不適合用在什麼情況
對比數據不能單獨證明 WCAG 合規。請在應用程式檢查外框面積、實際背景、裁切及焦點可見性；陰影間距假設頁面為不透明單色。
閱讀實作指南 →