调整网站的所有文本和背景以实现对比度（对比度交换） ADA WCAG 合规性答案

【问题标题】：Adjust All Text and Background For A Website For Contrast (Contrast Swapper) ADA WCAG Compliance调整网站的所有文本和背景以实现对比度（对比度交换） ADA WCAG 合规性
【发布时间】：2014-06-05 03:30:33
【问题描述】：

我正在建立一个适合老年人的网站。我在页面顶部添加了一个按钮，以删除所有背景颜色并将其更改为白色，然后将所有文本颜色更改为黑色，以提供对网站的高级友好/视障人士的良好视图。基本上试图实现对比度交换器。我尝试编写一个 jquery 函数来实现这个结果。然而，经过数小时的工作后，我想出的功能过于复杂，并没有提供我希望的结果，因为页面上可能有太多的 html 元素需要说明。 jQuery 或 Javascript 中是否有任何简单的方法来选择所有 html 元素并应用白色背景和黑色文本？如果有一种方法我可以在 CSS 中执行此操作也可以，但是结果必须是我可以重用的东西。我需要将此功能复制到 500 多个站点，而无需手动调整每个站点。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

大多数页面在<html> 标记上添加一个类。所以你可以制作 2 个 css 一个有类，一个没有。

例如：http://jsfiddle.net/7RVWG/

【讨论】：

【解决方案2】：

$('html *:not(script, style, noscript)').each(function() {
    $(this).css("background", "none");
    $(this).css("background-color", "yellow");
    $(this).css("color", "black");
    $(this).css("box-shadow", "none");
    $(this).css("text-shadow", "none");
});

我能够使用上面的 jQuery 代码来完成这项工作，而无需修改我的任何 CSS。上面的代码将背景更改为黄色并将文本颜色更改为白色。您可以修改这些以实现不同的行为，例如，黑底白字、白底黑字、黄底黑字。

【讨论】：

【解决方案3】：

import java.awt.*;
import javax.swing.*;

public class Test3 implements Icon
{
    public static final int NONE = 0;
    public static final int DECENDING = 1;
    public static final int ASCENDING = 2;

    protected int direction;
    protected int width = 8;
    protected int height = 8;

    public Test3(int direction)
    {
        this.direction = direction;
    }

    public int getIconWidth()
    {
        return width+1;
    }

    public int getIconHeight()
    {
        return height+1;
    }

    public void paintIcon(Component c, Graphics g, int x, int y)
    {
        Color bg = c.getBackground();
        Color light = bg.brighter();
        Color shade = bg.darker();

        int w = width;
        int h = height;
        int m = w / 2;
        if (direction == ASCENDING)
        {
            g.setColor(shade);
            g.drawLine(x, y, x + w, y);
            g.drawLine(x, y, x + m, y + h);
            g.setColor(light);
            g.drawLine(x + w, y, x + m, y + h);
        }
        if (direction == DECENDING)
        {
            g.setColor(shade);
            g.drawLine(x + m, y, x, y + h);
            g.setColor(light);
            g.drawLine(x, y + h, x + w, y + h);
            g.drawLine(x + m, y, x + w, y + h);
        }
    }

    public static void main(String[] args) 
    {
        Test3 t=new Test3(5);
        t.paintIcon(20,10,5,5);
    }
}

【讨论】：