用 CSS Checkbox Generator 產生一個核取方塊之後，驗證是一套三層的例行程序：確認預覽畫面呈現出正確的顏色與形狀、確認原生的 input 元件仍然能對鍵盤與點擊做出反應，以及確認周圍的表單主題不會破壞這個結果。CSS Checkbox Generator會在目前的瀏覽器分頁中，算繪出一個真正可互動的核取方塊，所以第一層驗證是內建的——當你調整大小、邊框、圓角，以及三個顏色控制項時，這個方塊會跟著調整尺寸、變色，並切換勾選狀態。第二層驗證可以在同一個分頁中進行：按下 Tab 會把鍵盤焦點移到預覽畫面上，按下空白鍵則會切換勾選狀態，這證明這個經過樣式設定的元素，仍然表現得像一個原生的表單控制項。第三層——停用、無效、必填、不確定狀態，以及強制色彩、高對比行為——並不會被模擬出來，所以最終的驗收檢查，必須在目的地表單內、針對頁面實際的 CSS 進行。
預覽畫面實際上算繪出什麼
這個工具公開的，正是頁面上一個核取方塊所使用的確切樣式表，該樣式表被包在名為 lizely-checkbox 的作用域類別名稱之下。點擊方塊本身或它的標籤文字，都能在勾選與未勾選之間切換，::after 虛擬元素會出現或消失，顏色也會和你提供的三個十六進位色值相符。這個預覽畫面同時也會顯示一個 :focus-visible 外框，其顏色會和你選擇的強調色相符，所以鍵盤焦點狀態也會被呈現出來。除此之外的一切——你主題中的焦點外框粗細、標籤周圍的頁面排版、你的表單函式庫所帶來的停用或錯誤樣式，以及作業系統的強制色彩覆寫——都在這個工具的範圍之外，必須在目的地環境中檢查。
這些數值控制項都有範圍限制，這也限制了你能透過一般的指標與鍵盤調整弄壞多少東西：
| 控制項 | 可接受的範圍 | 格式 |
|---|---|---|
| 大小 | 16 到 64 | 整數像素 |
| 邊框 | 1 到 6 | 整數像素 |
| 圓角半徑 | 0 到 50 | 百分比 |
| 強調色 | 任何看得見的顏色 | 六位數十六進位值 |
| 背景顏色 | 任何看得見的顏色 | 六位數十六進位值 |
| 勾選標記顏色 | 任何看得見的顏色 | 六位數十六進位值 |
格式錯誤的十六進位值、在需要整數的地方輸入小數，以及超出範圍的幾何數值，都會被這個工具拒絕，而不是悄悄產生誤導性的程式碼，所以只要預覽畫面能正常顯示，就代表輸入內容是有效的。
執行驗證流程
- 開啟這個產生器，一邊調整大小、邊框、圓角半徑、強調色、背景顏色與勾選標記顏色，一邊觀察即時預覽畫面的切換情形。
- 先點擊核取方塊本身，再點擊它的標籤文字，確認兩種方式都能切換勾選狀態。
- 按下 Tab，把焦點移到方塊上，確認會出現一個以你選定的強調色顯示的可見焦點外框。
- 在方塊處於焦點狀態時按下空白鍵；勾選狀態應該會來回切換，且頁面不會因此捲動。
- 開啟 Copy CSS 面板，接著開啟 Copy HTML 面板，把每一段程式碼分別貼進一個暫存檔案，確認輸出結果和預覽畫面一致。
- 在複製最終的 HTML 之前，把範例標籤文字換成描述實際表單選項的文字。
Copy CSS 與 Copy HTML 按鈕會分別請求剪貼簿權限。如果瀏覽器拒絕剪貼簿存取，這兩段程式碼區塊仍然會保持可見，讓你可以自行選取並複製，頁面也不會回報一個假的成功訊息。產生出來的 HTML 刻意不含任何內嵌指令碼，所以核取方塊的狀態，完全由瀏覽器與周圍的表單來管理。
這個產生器不會模擬的狀態
這個基準只涵蓋未勾選、已勾選，以及 focus-visible 這三種狀態。停用、無效、必填、唯讀、不確定狀態，以及情境式說明樣式，都不會由這個工具產生，所以必須在真正做出選擇的那個表單內加入並驗證——想更深入了解，可參閱說明which states the CSS Checkbox Generator covers的指南。一個實用的原則是：如果某個狀態可能出現在正式上線的表單中，就必須在正式上線的表單中設計樣式並加以檢視，而不是只停留在這個產生器的預覽面板裡。
不確定狀態是一個值得特別提出的特殊情況：它是 input[type="checkbox"] 的原生屬性，必須透過指令碼設定在該 DOM 元素上，例如 el.indeterminate = true。這個工具不會產生那段 JavaScript，所以一個「全選」的父層控制項，需要在產生出來的 CSS 旁邊，額外搭配一段小小的處理程式，而這段處理程式必須在目的地頁面中測試，而不是在預覽畫面中測試。
瀏覽器層級的檢查（縮放、強制色彩、對比度）
把頁面縮放設定為 200%（Ctrl 加上加號，或 Cmd 加上加號），確認方塊、邊框與勾選標記仍然能清楚呈現。在不尋常的縮放層級、裝置像素密度，或極端的邊框設定下，反鋸齒處理可能會讓勾選標記的其中一側邊緣看起來稍微加重——這是用 ::after 虛擬元素在字符之上繪製標記時，一個已知的取捨。
開啟強制色彩模式（Windows：Ctrl + Shift + C；macOS Safari：啟用 Increase Contrast），確認這個控制項仍然清楚可見。作業系統可能會覆蓋你選擇的自訂顏色，而這種行為對視力不佳的使用者來說通常是有用的，所以不應該在沒有充分理由的情況下把它破壞掉。產生出來的輸出結果，不包含任何會壓制強制色彩覆寫的 CSS，這代表預設情況下會由系統覆寫勝出——請在強制色彩模式下開啟頁面，並用肉眼確認結果。
把強調色和周圍標籤的背景色，一起放進Color Contrast Checker中檢查，確保焦點外框，以及填色背景上的勾選標記，都能通過 WCAG AA 標準。根據CSS Basic User Interface Level 4規格，透過 appearance: none 移除原生繪製方式，仍然會保留底層 input 的語意，所以一旦對比度檢查通過，這個控制項就可以放心以真正的表單控制項、而不是一個經過樣式設定的 div 的身分上線。
把結果搬進你真正的表單
最好把這個輸出結果，當成一個乾淨的起點來對待。把 CSS 貼進一份受控管的樣式表，如果 lizely-checkbox 這個類別名稱和你設計系統的命名產生衝突，就重新命名它，並保留原生的 input type="checkbox" 元素，以及它和周圍標籤之間的關聯。使用框架的開發者，可以把 class 轉換成 className，並依需要串接 checked 與 onChange，同時仍然保留 input 元素本身。想更完整地了解如何把產生出來的核取方塊接進正式環境的標記中，可參閱how to make a checkbox in CSS the right way這篇指南。
把結果放進真正的表單之後，請用一個實體鍵盤，並針對頁面實際的 CSS，重新跑一遍前面逐步流程中的驗證清單。按下 Tab 進入表單，確認核取方塊落在 Tab 順序中預期的位置，按下空白鍵切換狀態，接著載入你表單函式庫中周圍的 hover、錯誤與停用樣式，確認沒有任何一項會不小心移除焦點外框，或蓋掉勾選標記的顏色。如果有任何地方看起來不對，問題出在你的樣式表，而不是這個產生器的輸出結果——最後再貼進一個全新的暫存檔案，確認重新產生的樣式表仍然和你看到的畫面一致。
一個視覺上好看的核取方塊，並不會自動變成一個具無障礙性的核取方塊，光靠這個產生器的預覽畫面，也不能取代在目的地環境中的實際測試。請針對頁面實際的背景，執行縮放檢查、強制色彩檢查與對比度檢查；在真正的表單中重新執行鍵盤檢查；然後才能上線。這個工具的工作，是給你一個乾淨的基準。而這套驗證流程，才是把這個基準，變成使用者真正能操作的控制項的關鍵。