The WCAG 2.0 formula differentiates between text smaller than 18pt and text larger than 18pt (or text that is bold and larger than 14pt).
For AA compliance, text should have a ratio of at least 4.5:1 (larger text, at least 3:1).
For AAA compliance, text should have a ratio of at least 7:1 (larger text, at least 4.5:1).
Reference
- Contrast Ratio: http://www.w3.org/TR/WCAG20/#contrast-ratiodef
- Relative Luminance: http://www.w3.org/TR/WCAG20/#relativeluminancedef
Credits
- HTML Color Picker - jscolor.js
- Inline Web Editor - hallo.js
- Front-end Framework - bootstrap.js
How to calculate contrast of color?
The contrast of color is calculated by measuring the difference in brightness between two colors. This is called the contrast ratio. The contrast ratio is calculated using the following formula:
contrast_ratio = (L1 + 0.05) / (L2 + 0.05)
where:
- L1 is the relative luminance of the lighter color
- L2 is the relative luminance of the darker color
The relative luminance of a color is a measure of how bright it is, relative to a reference white. The reference white is defined as having a relative luminance of 1.0.
The contrast ratio can range from 1 to 21. A contrast ratio of 1 means that the two colors are the same brightness. A contrast ratio of 21 means that the two colors are 21 times brighter than each other.
For accessibility purposes, the World Wide Web Consortium (W3C) recommends a minimum contrast ratio of 4.5:1 for text and images. This ensures that people with low vision can easily see the difference between the two colors.
Here are some examples of contrast ratios:
- White on black: 21:1
- Black on white: 1:21
- Yellow on blue: 7:1
- Green on red: 4.5:1
There are a number of ways to calculate image contrast. One common method is to use the Michelson contrast formula:
contrast = (Imax - Imin) / (Imax + Imin)
where:
- Imax is the maximum intensity value in the image
- Imin is the minimum intensity value in the image
The Michelson contrast formula is a simple way to measure the overall contrast of an image. However, it does not take into account the distribution of intensity values in the image.
Another method for calculating image contrast is to use the Luminance Contrast formula:
contrast = (Lmax - Lmin) / (Lmax + Lmin)
where:
- Lmax is the maximum luminance value in the image
- Lmin is the minimum luminance value in the image
The Luminance Contrast formula is a more accurate way to measure image contrast because it takes into account the distribution of luminance values in the image.
The contrast ratio is another measure of image contrast. The contrast ratio is calculated by dividing the maximum luminance value in the image by the minimum luminance value. The contrast ratio is a unitless quantity, and it can range from 1 to infinity.
The WebAIM Contrast Checker is a tool that can be used to calculate the contrast ratio of an image. The WebAIM Contrast Checker also provides recommendations for the minimum contrast ratio that is required for accessibility purposes.
In general, images with a higher contrast are easier to see and understand. However, too much contrast can also make an image difficult to see. The optimal contrast ratio for an image will depend on the specific application.
Color contrast rule
The color contrast rule is a requirement of the Web Content Accessibility Guidelines (WCAG) that ensures that text and images have sufficient contrast to be readable by people with low vision. The WCAG recommends a minimum contrast ratio of 4.5:1 for text and 3:1 for images.
The contrast ratio is a measure of the difference in brightness between two colors. A contrast ratio of 4.5:1 means that the lighter color is at least 4.5 times brighter than the darker color. A contrast ratio of 3:1 means that the lighter color is at least 3 times brighter than the darker color.
There are a number of online tools that can be used to calculate the contrast ratio of two colors. One such tool is the WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/.
The color contrast rule is important for accessibility because it ensures that people with low vision can easily see and understand the content of a web page. If the contrast ratio is too low, people with low vision may not be able to distinguish between the text and the background, making it difficult or impossible for them to read the content.
Here are some tips for ensuring that your web pages meet the color contrast rule:
- Use bright, contrasting colors for text and backgrounds.
- Use bold or larger fonts for text that needs to be highly readable.
- Avoid using colors that are similar in brightness, such as light blue and light green.
- Use a color contrast checker to test the contrast ratio of your web pages.
By following these tips, you can help to ensure that your web pages are accessible to people with low vision.
0 Comments