Js Color Contrast Ratio With Code Examples

  • Updated
  • Posted in Programming
  • 4 mins read

Js Color Contrast Ratio With Code Examples

In this lesson, we’ll use programming to try to resolve the Js Color Contrast Ratio puzzle. This is demonstrated by the code beneath.

perform invertColor(hex, bw) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    // convert 3-digit hex to 6-digits.
    if (hex.size === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    if (hex.size !== 6) {
        throw new Error('Invalid HEX coloration.');
    var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
    if (bw) {
        // http://stackoverflow.com/a/3943023/112731
        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
            ? '#000000'
            : '#FFFFFF';
    // invert coloration elements
    r = (255 - r).toString(16);
    g = (255 - g).toString(16);
    b = (255 - b).toString(16);
    // pad every with zeros and return
    return "#" + padZero(r) + padZero(g) + padZero(b);

One can remedy the identical downside utilizing a wide range of completely different methods Js Color Contrast Ratio. There is nobody proper method to do it. In the paragraphs that observe, we’ll talk about the various completely different options to the present downside.

perform luminance(r, g, b) {
    var a = [r, g, b].map(perform (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;
perform distinction(rgb1, rgb2) {
    var lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
    var lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
    var brightest = Math.max(lum1, lum2);
    var darkest = Math.min(lum1, lum2);
    return (brightest + 0.05)
         / (darkest + 0.05);
distinction([255, 255, 255], [255, 255, 0]); // 1.074 for yellow
distinction([255, 255, 255], [0, 0, 255]); // 8.592 for blue
// minimal really useful distinction ratio is 4.5, or 3 for bigger font-sizes

We have demonstrated, with a plethora of illustrative examples, methods to deal with the Js Color Contrast Ratio downside.

How do you discover the distinction ratio of a coloration?

Calculating a Contrast Ratio Contrast ratios can vary from 1 to 21 (generally written 1:1 to 21:1). (L1 + 0.05) / (L2 + 0.05), whereby: L1 is the relative luminance of the lighter of the colours, and. L2 is the relative luminance of the darker of the colours.24-Jun-2018

What is a coloration distinction ratio?

What Are Color Contrast Ratios? Color distinction ratio often means the ratio between the colour of textual content (or further necessary visible data) and the colour of the background, which should meet minimal ratio ranges to make sure legibility for visually-impaired and/or coloration blind customers.

What is distinction ratio in HTML?

We measure distinction between textual content or graphics towards the background coloration. This known as distinction ratio. A white textual content on a white background has a distinction ratio of 1. This is unattainable to understand. Black textual content on a white background has a distinction ratio of 21.

How do you repair the distinction coloration on accessibility?

CSS Tips for Better Color and Contrast Accessibility

  • Check for Text Readability.
  • Increase Font Size or Weight.
  • Use HSL Colors to Improve Color Contrast.
  • Add a Semi-Transparent Overlay to Background Images.
  • Test Colors With the Grayscale Filter.

What is a greater distinction ratio 1000 1 or 3000 1?

The finest distinction ratio ought to be a 3000:1 static distinction ratio. A 1000:1 static distinction ratio can be not a nasty one. Note it ought to be a static distinction ratio, not a dynamic distinction ratio. The present LED-backlit screens mechanically flip off pixel backlighting in darkish scenes.14-Feb-2022

What is a 1000000 1 distinction ratio?

1,000,000:1 distinction ratio. A distinction ratio of 1,000,000:1 gives an unbelievable vary of distinction, which together with excessive brightness, higher replicates what the attention can see in actual life.

Is a 1000 1 distinction ratio good?

Although some particular customers, reminiscent of players or individuals who use their screens for skilled video enhancing and VFX, would possibly favor screens with completely different distinction ratios, the best distinction ratio for a monitor for normal utilization is 1000:1 to 3000:1.03-Oct-2021

What distinction ratio is finest?

Generally, a better distinction ratio is best since a show with a 100,000:1 ratio can produce darker black ranges and extra saturated colours than one with a 1,000:1 ranking, thus reaching a extra natural-looking picture.29-Jan-2022

What is the most effective coloration distinction ratio?

Best Practices

  • Ratio: Text and interactive parts ought to have a coloration distinction ratio of a minimum of 4.5:1.
  • Color as indicator: Color shouldn’t be the one indicator for interactive parts.
  • Color blindness: Red/inexperienced coloration blindness is the most typical, so keep away from inexperienced on pink or pink on inexperienced.

How do you repair distinction ratio?

To repair an Insufficient Color Contrast error, you have to to make sure that flagged parts meet the minimal required ratio of 4.5:1. To achieve this, you have to to search out the hexadecimal codes of your foreground and background coloration, and check them in a coloration distinction checker.

Leave a Reply