除非用戶想要或需要更高的對比度，否則如何確保網站的顏色主題提供符合WCAG 2 最低對比度要求的高對比度替代方案，同時更喜歡柔和、低對比度的主題？
我嘗試使用 prefers -contrast 媒體查詢定義具有較高對比度并提供較低對比度版本的后備主題，除非用戶需要高對比度，但下面的示例（也作為此處的代碼筆，它未能通過 ax 的可訪問性審核Chrome 擴展由于 2.71 的前景色對比度低：#eeeeee，背景色：#f26600。）
需要什么 CSS 代碼來定義正確的回退？用戶如何表示他們的對比度偏好，有沒有辦法讓瀏覽器或作業系統根據日光設定、暗/亮主題、環境光傳感器等來調整對比度偏好？
p {
background-color: #f26600;
color: #eeeeee;
}
@media (prefers-contrast: more) {
p {
background-color: #aa3300;
color: #ffffff;
}
}
我還嘗試反轉代碼片段中的邏輯以使高對比度成為實際默認值，而不是相反：codepen.io/openmindculture/pen/eYVPgoo。這在沒有顏色對比警告的情況下驗證，但這會顯示柔和的版本嗎？我在哪里可以說我寧愿減少對比度，我怎么知道？
uj5u.com熱心網友回復：
這是一個非常有趣的問題。
關于提供替代對比版本
提供具有足夠對比度的控制元件以允許用戶切換到使用足夠對比度的演示實際上是滿足 WCAG 對比度標準的充分技術。
但是，它們確實需要以下內容：
- 原始頁面上的鏈接或控制元件本身必須滿足所需 SC 的對比度要求。（如果用戶看不到控制元件，他們可能無法使用它轉到新頁面。）
- 新頁面必須包含與原始頁面相同的所有資訊和功能。
- 新頁面必須符合所有 SC 以獲得所需的一致性級別。（即，新頁面不能只具有所需的對比度水平，否則不符合）。
既然你只想切換樣式，那么你很可能會遇到2和3。你只需要添加一個切換樣式的按鈕。
您可以有第二個樣式表（.css 檔案）來定義對比版本。然后您可以執行以下操作：
<link href="contrast.css" rel="alternate stylesheet" type="text/css" title="Contrast Styles">
這將允許支持這些（Firefox）的瀏覽器向用戶提供樣式切換。請參閱替代樣式表
然后添加一個通過 JavaScript 激活該樣式表的按鈕，以及一個匯入它的媒體查詢 if @media (prefers-contrast: more)。
在替代樣式表處于活動狀態時，不確定您的審計工具是否會通過該工具。最后，為了符合法律，始終需要手動審核，您應該通過 1.4.3。
期望用戶如何表明他們的對比偏好
過去有一個很大的討論是否應該將字體大小控制元件作為網站的一部分，因為它已經在瀏覽器中使用了很長時間。WCAG 從來沒有要求它（afaik），但網站上控制的論點是很多用戶對他們的瀏覽器不夠了解。
同樣的論點也適用于對比度模式（很多人可能不知道作業系統的對比度設定或無權訪問它們）但這次 WCAG 實際上要求以任何方式進行控制。
有沒有辦法讓瀏覽器或作業系統根據日光設定、暗/亮主題、環境光傳感器等來調整對比度偏好？
有一些方法可以根據 Android 中的日光設定使用深色主題設定，并且可能還有一些允許根據環境光進行切換的應用程式。
我不知道任何允許基于相同設定對比度模式的功能，甚至在Windows 11 中也沒有，這大大改善了它們的可訪問性對比主題。
這可能是有道理的，因為它更多地表明用戶需要更高的對比度，無論是白天還是夜晚，明暗主題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/488156.html