?????? ?????????????? ?????????????????????????? ???????????????????? (????????) - ?????????? ???????????????? ??????????
Image Credit : Daniella Alscher, Brand Designer for G2. Color Contrast Checking Demo

?????? ?????????????? ?????????????????????????? ???????????????????? (????????) - ?????????? ???????????????? ??????????

Muhammad Afzal Muhammad Afzal

Muhammad Afzal

?? Vue Js ?? React & Next.js Developer | ???? JavaScript Engineer | ??? Frontend Architect | ?? Pixel-Perfect Innovator | ??? UI/UX Specialist

发布日期: 2023年9月22日
+ 关注

The color contrast ratio refers to the ???????????????????? ???? ?????????????????? ???? ???????????????????? ?????????????? ?????? ????????????.?It is commonly used to assess the accessibility and readability of text or other visual elements, particularly in digital interfaces, for people with visual impairments or color vision deficiencies.

The color contrast ratio is expressed as a numerical value, typically in the format of "X:1," where X represents the contrast ratio. The higher the contrast ratio, the more distinguishable the colors are from each other.

The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratio requirements for different text sizes and different levels of accessibility compliance. For example, a contrast ratio of at least 4.5:1 ???? ?????????????????? ?????????????????????? ?????? ???????????? ???????? ?????? ?? ???????????????? ?????????? ???? ???? ?????????? 3:1 ?????? ?????????? ???????? ???? ?????????? ???? ???????? ???????? ?????????? ???? ??????????????????.

The contrast ratio is calculated by comparing the relative luminance values of two colors. The formula to calculate the contrast ratio is as follows:

???????????????? ?????????? = (??1 + 0.05) / (??2 + 0.05)

In this formula, L1 represents the relative luminance of the lighter color, and L2 represents the relative luminance of the darker color. The "+ 0.05" term is added to prevent the ratio from becoming zero, as some extremely low luminance values can cause issues in the calculation.

The relative luminance of a color is calculated using the formula:

???????????????? ?????????????????? = 0.2126 ?? + 0.7152 ?? + 0.0722 * ??

领英推荐

In this formula, R, G, and B represent the red, green, and blue color channels of the color, respectively. The values of R, G, and B should be normalized to a range between 0 and 1, where 0 represents the absence of that color channel and 1 represents the maximum intensity.

Once you have calculated the relative luminance values for the two colors, you can plug them into the contrast ratio formula to obtain the final result.

Written by :

Muhammad Afzal


要查看或添加评论，请登录

Muhammad Afzal的更多文章

  • Prebrowsing Resource Hints
    2023年11月29日

    Prebrowsing Resource Hints

    As a web developer, you probably know how important it is to optimize the performance of your website or web…

  • Playing with Binary Data
    2023年11月1日

    Playing with Binary Data

    Working with binary data is a common task in programming, especially when dealing with file I/O, network protocols, or…

  • The creative spark with ::before & ::after
    2023年1月11日

    The creative spark with ::before & ::after

    The ::before and ::after pseudo-elements in CSS allow you to insert content before and after an HTML element…

  • Undefined | Null | Not Defined | 0
    2022年12月30日

    Undefined | Null | Not Defined | 0

    In JavaScript, there are several values that can represent an absence of value or the absence of definition: undefined:…

  • The subtle difference between for-of and for-in looping structures in JavaScript
    2022年6月24日

    The subtle difference between for-of and for-in looping structures in JavaScript

    There are a total of seven ways for looping in JAVASCRIPT. First three are common in almost all of the modern languages.

社区洞察

其他会员也浏览了