zoukankan      html  css  js  c++  java
  • 网站内容可访问性——关于背景与前景颜色的对比标准

    这星期在工作上碰到一个关于颜色对比度的测试问题:即在网页上文字的前景色与该文字的背景色对比,应该达到WCAG(Web内容可访问性指南)中的要求。该文档对Web内容进行了一些规范要求,能让你的网站内容的可访问性达到最佳。
    其中就有一条(G18)关于颜色对比度的规范,应该按照它的公式至少达到4.5:1的要求,这样对于人的肉眼就比较容易区分开背景色与前景色。
    以下是我个人的C#实现:
    /// <summary>
    /// 将十六进制颜色值转换为RGB数组
    /// </summary>
    /// <param name="hexadecimal">颜色十六进制值 eg:#FF1A2B</param>
    /// <returns>RGB数组</returns>
    public byte[] convertHex(string hexadecimal)
    {
    byte[] resultByte = new byte[3];
    int num = 0;
    hexadecimal
    = hexadecimal.Trim('#');

    //有可能传入的是个argb值
    if (hexadecimal.Length>6)
    {
    hexadecimal
    = hexadecimal.Remove(0, 2);
    }

    for (int i = 0; i < 6 ; i++)
    {
    if (i%2==0)
    {
    StringBuilder sb
    = new StringBuilder();
    sb.Append(hexadecimal[i]);
    sb.Append(hexadecimal[i
    + 1]);

    resultByte[num
    ++] = Convert.ToByte(sb.ToString(), 16);
    }
    }

    return resultByte;

    }

    /// <summary>
    /// 比较两颜色对比度
    /// </summary>
    /// <param name="rgb1"></param>
    /// <param name="rgb2"></param>
    /// <returns>对比值</returns>
    public double colorCompare(byte[] rgb1, byte[] rgb2)
    {
    double L1 = relativeLuminance(rgb1);
    double L2 = relativeLuminance(rgb2);
    double result = (Math.Max(L1, L2) + 0.05) / (Math.Min(L1, L2) + 0.05);

    return Math.Round(result, 2);
    }

    private double relativeLuminance(byte[] RGB)
    {
    double Rs = RGB[0] * 1.0 / 255;
    double Gs = RGB[1] * 1.0 / 255;
    double Bs = RGB[2] * 1.0 / 255;
    double R, G, B;

    R
    = Rs <= 0.03928 ? Rs / 12.92 : Math.Pow((Rs + 0.055) / 1.055, 2.4);
    G
    = Gs <= 0.03928 ? Gs / 12.92 : Math.Pow((Gs + 0.055) / 1.055, 2.4);
    B
    = Bs <= 0.03928 ? Bs / 12.92 : Math.Pow((Bs + 0.055) / 1.055, 2.4);

    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
    }
  • 相关阅读:
    状态机
    perl学习之五:列表和数组
    正则语言(转的 大额_skylar )
    算法分析-动态规划(最优二叉搜索树)
    算法分析-动态规划(矩阵链相乘,最长公共子序列,最长递增子序列)
    算法分析-动态规划(装配线调度)
    算法分析-leedcode正则题目
    算法分析-动态规划(cut_rod)
    算法分析-分治法的主方法【转的 凭海临风】
    正则表达式之match与exec【转的 楼兰之风】
  • 原文地址:https://www.cnblogs.com/heqichang/p/2096253.html
Copyright © 2011-2022 走看看