![]() ![]() the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.Ĭalculating the relative luminance may be a bit tricky and look complicated, especially if we check the logic included in the WCAG definition:įor the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as: Table with color contrast requirements depending on font size and accessibility levelīefore getting any deeper into the contrast ratio and how to calculate it, we must introduce the concept of luminance and relative luminance: The general idea remains: text color contrast must be 4.5:1, but there are some exceptions when text is larger (18 points or higher) or bold (14 points or higher) in which case a color contrast ratio of 3:1 is enough for AA-level accessibility.įor achieving a AAA-level accessibility color contrast, the ratio numbers go up to 7:1 for regular text, and 7:1 for large text. Also in order to achieve a higher standard level of accessibility (AAA) the contrast must be higher than for other levels (AA). Smaller text needs higher contrast than larger or bolder text. There used to be an unique contrast requirement of 4.5:1, but WCAG 2.1 defined different color contrast requirements that depended not only on the colors, but also on the size and weight of the element that is being tested or the level of accessibility to be achieved. What are WCAG color contrast requirements? If both are the exact same color, the contrast ratio will be 1 The highest contrast is between white and black, and exact opposites in the color wheel ( complementary colors) will have high values too. The resulting value of that calculation will go from 1 to 21 (normally represented as 1:1 or 21:1 respectively). ![]() The contrast ratio between two colors is calculated using a mathematical function that we will see below. On the web, you want to have (enough) high contrast between the foreground and background colors so they provide a better experience for people with vision impairments and color deficiencies. To put it in a simple way, the contrast between two colors is the difference between both of them. It will allow for some creative process.īut before going to the coding part, let's see some theory.It will help you understand how color contrast works and.There are good reasons to create your own color contrast checker: There are many great online tools that can help you check the color contrast, but in this post I am going to show you how to create your own. In fact, it was the most common problem found in The WebAIM Million analysis, adding up to over 60% of all the issues found. Insufficient color contrast is one of the most common issues when talking about Web Accessibility. ![]()
0 Comments
Leave a Reply. |