Skip to main content

Color

Color plays a crucial role in universal design, especially when it comes to accessible information and communication technologies (ICT). Here are some key impacts:
  • Readability and Visibility: High-contrast color combinations improve readability for people with visual impairments. For example, using dark text on a light background or vice versa helps ensure that text is easily distinguishable.
  • Color Blindness: Around 8% of men and 0.5% of women globally are affected by color blindness. Designing with color blindness in mind means avoiding color combinations that are difficult to distinguish, such as red and green. Tools like color blindness simulators can help designers create more inclusive color schemes.
  • Alternative Indicators: Relying solely on color to convey information can be problematic. For instance, if a form uses only color to indicate required fields, users who cannot perceive that color might miss important information. Adding text labels or symbols (like an asterisk) ensures everyone can understand the content.
  • User Customization: Allowing users to adjust color settings, such as text and background colors, can enhance accessibility. This flexibility helps users with different visual needs to customize their viewing experience for better comfort and comprehension.

Measuring color contrast

Web Content Accessibility Guidelines (WCAG) 2.x

Color contrast is a measure of how different two colors are from each other. You can think of it as the difference in brightness between the text and its background. Low color contrast means that text can be hard to read because its color is too close to the background. This makes communicating with people with vision and cognitive limitations much harder.

The WCAG guidelines measure contrast as a ratio. It's based on some very complicated math equations but there are a number of online tools and apps that you can use to check the contrast (see a partial list below). WCAG requires a minimum ratio of 4.5:1 for normal text. In other words, the text should be 4 1/2 times brighter than the background. For large text (18pt or larger), the minimum is 3:1. Larger text is easier to see so it needs less contrast.

Exception: Text in logos or brand names doesn't have to meet the WCAG minimum contrast ratios. Decorative text that is not meant to be read, like a watermark or logo in the background of a page, is also exempt.

Advanced Perceptual Contrast Algorithm (APCA)

The Advanced Perceptual Contrast Algorithm (APCA) is a new way to compute contrast based on modern research on color perception. Its models are specifically related to how colors appear on computer displays & devices and accessible user needs, with a focus on readability. Unlike the WCAG ratios in the section above, APCA considers the font size in the calculation. Instead of a contrast ratio, APCA outputs a Lightness contrast (Lc) value from Lc 0.0 to Lc 106.0. Lc 75 is the minimum for body text and is about the same as WCAG's 4.5:1. The World Wide Web Consortium is currently developing WCAG 3.0 and is experimenting with a switch to APCA.

Back to top