Why a11y?

Color Contrast

Importance of Color Contrast

Color contrast refers to the difference in light between foreground (text) and background colors. Proper contrast ensures that text is legible for users with visual impairments, such as color blindness, low vision, or those reading content in challenging lighting conditions.

What Is the Contrast Ratio?

The contrast ratio is the difference between the luminance (brightness) of two colors, typically text and its background. The ratio ranges from 1:1 (no contrast, like white on white) to 21:1 (maximum contrast, like black on white).

Guidelines for Ensuring Sufficient Contrast

Contrast Ratio for Text

  • Normal Text: For standard-sized text (below 18pt or 14pt bold), the contrast ratio should be 4.5:1 against its background.
  • Large Text: For larger text (18pt or larger, or 14pt bold), the contrast ratio requirement is reduced to 3:1 because larger text is easier to read.

Enhanced Contrast for AAA Compliance

  • Normal Text (AAA level): Requires a contrast ratio of 7:1 for regular text.
  • Large Text (AAA level): Requires a contrast ratio of 4.5:1 for large text.

Non-Text Contrast

For user interface components like buttons, form fields, and interactive elements, ensure a contrast ratio of at least 3:1 between the component and its adjacent colors.

Example of good contrast:

  • Black text on a white background (contrast ratio 21:1).
  • Dark blue text on a light yellow background (contrast ratio 10:1).

Color Contrast for Icons, Borders, and Graphical Objects

Non-text elements (e.g., icons, charts, and graphical objects) should also meet the minimum contrast requirements. This is important for ensuring that users with visual impairments can perceive and interact with these elements effectively.

Tools for Testing Color Contrast

  • WebAIM Contrast Checker: Use the WebAIM Contrast Checker to test the contrast ratio of your text and background colors. It will tell you if your contrast meets WCAG AA or AAA standards. Link: https://webaim.org/resources/contrastchecker/
  • Chrome DevTools: In the “Accessibility” section of Chrome's Developer Tools, you can check the contrast ratios of elements on a webpage directly.
  • Color Contrast Analyzers: There are various standalone tools like the Colour Contrast Analyser, which can be used for testing contrast ratios.

Adjusting for Color Blindness

Avoid relying solely on color: In addition to having a good contrast ratio, do not use color as the only way to convey important information (such as error messages, or status indicators). Use additional visual cues such as text, icons, or patterns.

Instead of relying only on red text for an error, use a red icon with accompanying text like "Error: Please enter a valid email address."

Testing for Contrast Issues

  • Simulate visual impairments: Tools like NoCoffee Vision Simulator for Chrome can help simulate different types of vision impairments, allowing you to test how your site appears to users with low vision or color blindness.
  • Manual Testing: View your designs in grayscale to test how readable and perceivable your content is without relying on color.

Common Mistakes to Avoid

  • Low contrast links: Ensure that links stand out from regular text. Relying solely on color (like blue text for links) without ensuring sufficient contrast can be problematic.
  • Overlays and text on images: Placing text over a background image can cause contrast issues, especially if parts of the image are light and parts are dark. Use a solid background or apply a semi-transparent overlay to ensure the text is readable.
  • Inconsistent contrast: Be consistent with your contrast across the site. Avoid having some parts of the site with high contrast and others with poor contrast, as this creates an inconsistent user experience.

Color Contrast in CSS

In CSS, you can set text color and background color explicitly to ensure proper contrast. It’s important to check the contrast between these two.

Example of good contrast in CSS:

body {
	background-color: #fff; /* white background */
	color: #000; /* black text */
}

For icons or other UI elements:

button {
	background-color: #007bff; /* blue background */
	color: #fff; /* white text */
	border: 2px solid #0056b3; /* darker blue border for better contrast */
}

Resources for Accessible Color Palettes

Accessible Color Palettes: You can generate accessible color schemes and test their contrast ratios using tools like Adobe Color and Contrast Grid.

  • Adobe Color: https://color.adobe.com/create/color-accessibility
  • Contrast Grid: https://contrast-grid.eightshapes.com/

Related links