[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"guide:color-contrast-checks-before-release":3},{"slug":4,"title":5,"description":8,"keywords":11,"updatedAt":14,"summary":15,"sections":24,"relatedPages":102},"color-contrast-checks-before-release",{"zh-Hant-TW":6,"en":7},"色彩對比檢查：Release 前不只看主色","Color Contrast Checks Before Release: Text, States, and Real Screens",{"zh-Hant-TW":9,"en":10},"色彩對比不是只檢查品牌主色。Release 前應確認文字、連結、錯誤訊息、焦點提示、按鈕狀態、圖示與元件邊界在真實畫面中是否清楚。","Color contrast is not only about a brand palette. Before release, check text, links, errors, focus indicators, button states, icons, and component boundaries in real screens.",{"zh-Hant-TW":12,"en":13},"色彩對比檢查, color contrast checker, WCAG 對比, 對比值檢查, 無障礙色彩檢查","color contrast checker, WCAG contrast checker, accessibility color contrast, contrast ratio checker, color accessibility checker","2026-07-24",{"zh-Hant-TW":16,"en":20},[17,18,19],"對比檢查應放在真實頁面狀態中看，包含 hover、focus、錯誤、disabled、深色或淺色背景。","自動化掃描可以找出部分文字對比問題，但圖示、邊框、焦點提示、圖片背景與互動狀態仍需要人工確認。","DevCheck 可以協助在目前頁面執行 axe 掃描與視覺情境模擬；它不是專用取色或對比計算器。",[21,22,23],"Contrast review should happen in real page states, including hover, focus, error, disabled, dark, and light backgrounds.","Automated scans can catch some text contrast issues, but icons, borders, focus indicators, image backgrounds, and interaction states still need human confirmation.","DevCheck can help with axe scans and visual simulations on the current page; it is not a dedicated color-picking or contrast-ratio calculator.",[25,36,58,69,80],{"title":26,"body":29},{"zh-Hant-TW":27,"en":28},"先從真實狀態開始，不要只看設計稿主色","Start from real states, not only the design palette",{"zh-Hant-TW":30,"en":33},[31,32],"很多對比問題不是出現在品牌主色，而是出現在實際流程裡：表單錯誤變紅、按鈕被 hover、欄位取得焦點、連結被放在圖片或卡片背景上、元件進入 disabled 狀態，或深色模式與淺色模式切換後。","所以 release 前的檢查不應只問「這兩個色碼有沒有過」。更實際的問題是：使用者在目前這個畫面狀態下，能不能看清文字、辨識元件、理解錯誤與找到焦點位置。",[34,35],"Many contrast problems do not appear in the brand palette. They appear in the flow: a form error turns red, a button is hovered, a field receives focus, a link sits on an image or card background, a component becomes disabled, or the interface switches between dark and light modes.","Before release, the practical question is not only whether two color values pass a ratio. It is whether people can read the text, identify the component, understand the error, and find the focused element in the current screen state.",{"title":37,"body":40,"items":45},{"zh-Hant-TW":38,"en":39},"哪些項目要一起看？","What should be checked together?",{"zh-Hant-TW":41,"en":43},[42],"WCAG 2.2 對文字與圖片文字有 Contrast (Minimum)；對元件與必要圖形有 Non-text Contrast；也要求資訊不能只靠顏色傳達。這代表對比檢查不只是一個文字比例問題。",[44],"WCAG 2.2 includes Contrast (Minimum) for text and images of text, Non-text Contrast for components and meaningful graphics, and Use of Color so information is not conveyed by color alone. That makes contrast review broader than one text-ratio check.",{"zh-Hant-TW":46,"en":52},[47,48,49,50,51],"文字與背景：一般文字、說明文字、placeholder、hover\u002Ffocus 時出現的文字。","連結與互動文字：連結不能只靠顏色和周圍文字區分，必要時要有底線、圖示或其他可見提示。","元件與狀態：按鈕、輸入框、checkbox、radio、switch、selected、error、focus 等狀態。","圖示與邊界：圖示、控制項邊框、焦點框、圖表中必要的線條或區塊。","背景變化：圖片背景、漸層、卡片、深色模式、淺色模式與品牌主視覺。",[53,54,55,56,57],"Text and backgrounds: body text, helper text, placeholders, and text shown on hover or focus.","Links and interactive text: links should not rely only on color when they need to be distinguished from surrounding text.","Components and states: buttons, inputs, checkboxes, radios, switches, selected, error, and focus states.","Icons and boundaries: icons, control borders, focus rings, and meaningful chart lines or regions.","Background changes: image backgrounds, gradients, cards, dark mode, light mode, and brand hero sections.",{"title":59,"body":62},{"zh-Hant-TW":60,"en":61},"自動化掃描能幫忙，但不能涵蓋所有狀態","Automation helps, but it does not cover every state",{"zh-Hant-TW":63,"en":66},[64,65],"axe-core 這類自動化掃描可以抓出部分可被程式判斷的對比問題，特別是目前 DOM 狀態裡的文字與背景。但它不一定看得到每個 hover 狀態、被動態打開的選單、不同圖片背景、客製圖示含義，或設計者用顏色傳達的業務狀態。","因此比較可靠的流程是：先用掃描工具找出明顯問題，再由設計、QA 與工程在真實畫面中檢查關鍵狀態。需要精確 ratio 時，仍應使用專門的取色或對比計算工具確認。",[67,68],"Automated engines such as axe-core can catch some machine-detectable contrast issues, especially text and background combinations in the current DOM state. They may not see every hover state, dynamically opened menu, image background, custom icon meaning, or business state conveyed through color.","A more reliable workflow is to scan for obvious issues first, then have design, QA, and engineering review important states in real screens. When exact ratios matter, use a dedicated color picker or contrast-ratio tool to confirm the values.",{"title":70,"body":73},{"zh-Hant-TW":71,"en":72},"DevCheck 與 UI Kit 在這裡的角色","Where DevCheck and UI Kit fit",{"zh-Hant-TW":74,"en":77},[75,76],"DevCheck 可以在目前瀏覽器頁面執行 axe 掃描，也可以用色覺、文字間距、視野缺損、老花、近視與白內障等模擬協助檢查可讀性。這些是初步檢查與討論線索，不是完整人工檢測或法律符合性保證。","UI Kit 的 CSS variables 和元件樣式可以讓團隊有一致的調整入口，但 token 本身不會自動保證對比。真正需要確認的是元件在實際內容、實際背景與實際狀態下是否仍然清楚。",[78,79],"DevCheck can run axe scans on the current browser page and provide color vision, text spacing, visual field loss, presbyopia, myopia, and cataract simulations for readability review. These are preliminary checking and discussion clues, not a full audit or legal compliance guarantee.","UI Kit CSS variables and component styles give teams a consistent customization surface, but tokens do not automatically guarantee contrast. The actual question is whether the component remains clear with real content, real backgrounds, and real states.",{"title":81,"body":84,"items":89},{"zh-Hant-TW":82,"en":83},"一個可執行的 release 前檢查順序","A practical pre-release sequence",{"zh-Hant-TW":85,"en":87},[86],"把色彩對比放進 release checklist 時，不需要一開始就建立大型流程。先針對主要任務頁面建立穩定順序即可。",[88],"Adding contrast to a release checklist does not need to start as a large process. Begin with a stable sequence for the main task pages.",{"zh-Hant-TW":90,"en":96},[91,92,93,94,95],"在本機或測試站開啟主要流程頁面。","執行自動化掃描，先處理明顯的文字對比問題。","手動切換 hover、focus、error、selected、disabled、loading、empty 與 dark\u002Flight 狀態。","檢查連結、表單錯誤、焦點提示、圖示、邊框與圖表是否只靠顏色傳達資訊。","需要數值證明時，用專門對比工具取色並記錄 ratio，再修正與重測。",[97,98,99,100,101],"Open the main task flow in local development or staging.","Run an automated scan and fix obvious text contrast issues first.","Manually switch hover, focus, error, selected, disabled, loading, empty, and dark\u002Flight states.","Check whether links, form errors, focus indicators, icons, borders, and charts rely only on color.","When numeric evidence is needed, use a dedicated contrast tool to sample colors and record the ratio, then fix and re-test.",[103,110,115,120,125,129,133,137],{"label":104,"path":106,"description":107},{"zh-Hant-TW":105,"en":105},"Accesserty DevCheck","\u002Fdevcheck",{"zh-Hant-TW":108,"en":109},"用瀏覽器內工具檢查本機、測試站、登入後頁面與互動狀態。","Run browser-based checks on local builds, staging pages, authenticated screens, and interactive states.",{"label":111,"path":114},{"zh-Hant-TW":112,"en":113},"WCAG 檢測工具","WCAG compliance tool","\u002Fwcag-compliance-tool",{"label":116,"path":119},{"zh-Hant-TW":117,"en":118},"色彩對比術語頁","Color contrast glossary page","\u002Fglossary\u002Fcolor-contrast",{"label":121,"path":124},{"zh-Hant-TW":122,"en":123},"自動化檢測限制指南","Automated accessibility checks limits guide","\u002Fguides\u002Fautomated-accessibility-checks-limits",{"label":126,"path":128},{"zh-Hant-TW":127,"en":127},"UI Kit","\u002Fuikit",{"label":130,"path":132},{"zh-Hant-TW":131,"en":131},"W3C Contrast Minimum","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fcontrast-minimum",{"label":134,"path":136},{"zh-Hant-TW":135,"en":135},"W3C Non-text Contrast","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fnon-text-contrast",{"label":138,"path":140},{"zh-Hant-TW":139,"en":139},"W3C Use of Color","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fuse-of-color",1789828088582]