![]() The "^" character is the exponentiation operator. ![]() 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |