This is the fourth day of my participation in Gwen Challenge

Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

Contrast standard

The MD specification states that text should be at least 4.5:1 (based on brightness) in contrast to maintain clarity; The best contrast ratio is 7:1.

The calculation rule of contrast can be simply understood as the value obtained by dividing the relative brightness of two colors. For example, the contrast of two whites is 1:1, and that of white (#FFFFFF) and black (#000000) is 21:1, that is to say, the range of contrast is between 1:1 and 21:1.

Why is it based on brightness?

According to the W3C, reading performance evaluation of people without color defects found that hue and saturation had little or no effect on legibility, while brightness and contrast had a significant effect on legibility. So, color difference is not the key, even for people with weak color, as long as there is enough brightness contrast, it will not affect reading.

Contrast level

WCAG 2.0 divides the color contrast level into three categories: A, AA and AAA. The higher the level is, the higher the color contrast is and the greater the visual pressure is:

  • Grade A (using A contrast ratio of 3:1, the lowest acceptable for ordinary observers)

  • Class AA (using a 4.5:1 contrast ratio, which is the lowest acceptable contrast ratio for people with ordinary vision loss)

  • AAA (uses a 7:1 contrast ratio, which is the lowest acceptable contrast ratio for people with severe vision loss)

Calculate the contrast between the two colors

luminanace(r, g, b) {
    var a = [r, g, b].map(function (v) {
        v /= 255;
        return v <= 0.03928
            ? v / 12.92
            : Math.pow((v + 0.055) / 1.055.2.4);
    });
    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
},
contrast(rgb1, rgb2) {
    // hex to rgb
    var result1 = / ^ #? ([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(rgb1);
    var result2 = / ^ #? ([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(rgb2);
    var rgb1Obj = result1 ? {
        r: parseInt(result1[1].16),
        g: parseInt(result1[2].16),
        b: parseInt(result1[3].16)} :null;
    var rgb2Obj = result2 ? {
        r: parseInt(result2[1].16),
        g: parseInt(result2[2].16),
        b: parseInt(result2[3].16)} :null;

    var lum1 = this.luminanace(rgb1Obj.r, rgb1Obj.g, rgb1Obj.b);
    var lum2 = this.luminanace(rgb2Obj.r, rgb2Obj.g, rgb2Obj.b);
    
    // Light/dark
    var brightest = Math.max(lum1, lum2);
    var darkest = Math.min(lum1, lum2);
    
    return (brightest + 0.05) / (darkest + 0.05);
}

console.log('contrast>>>>>>'.this.contrast('#ffffff'.'#ffff00'));/ / 1.0738392309265699

Copy the code

Reference documentation

  • Introduction to automatic color matching technology of CSS foreground background
  • Selection of contrast between text and background
  • How to programmatically calculate the contrast ratio between two colors?

Recent hot articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • Vue. Js Naming Style Guide (Easy to remember Version)

Want to see more exciting content, follow me to get more front-end technology and personal growth related content, I believe that interesting people will meet!

Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin