* - Buttons - Incorrect Text Size and Contrast

What the issue is

Buttons with text that is too small or lacks sufficient contrast against the button background can be difficult to read for many users. This readability issue can particularly impact users with vision impairments, including those with low vision or color vision deficiencies. Ensuring text within buttons is clearly legible is crucial for all users to identify and understand the function of each button.

Why this is important

Text size and contrast are fundamental aspects of web accessibility, enhancing the readability and visibility of interactive elements like buttons. Adequate contrast and legible text sizes help ensure that users, regardless of their visual abilities, can effectively read and understand button labels. This is particularly important for users who rely on visual cues to navigate and interact with web content.

Who it affects

This issue affects:

  1. Users with low vision who require high contrast and larger text to perceive content.
  2. Users with color vision deficiencies who may struggle to read text with insufficient contrast.
  3. Older users who often benefit from larger text sizes and clearer contrast to compensate for decreased visual acuity.
  4. All users, as high contrast and legible text improve clarity and usability for everyone, not just those with visual impairments.

How to remediate the issue

  1. Ensure that text within buttons adheres to the minimum contrast ratio requirements specified by WCAG the the level targeted by the website (AA or AAA).
  2. Use sufficiently large font sizes for text within buttons to improve readability. Generally it is assumed to be, as a minimum, the default size of the browser's text (16px). It is recommended that fonts are all defined relative to that default size to ensure that they can scale when the page zooms (fxed point text cannot scale e.g. setting font size to 18px).
  3. Use clear, easily readable font faces, and avoid decorative "fancy" fonts especially for important interactive elements such as buttons.
  4. Test your buttons with various contrast ratio and text size tools to ensure compliance with accessibility standards.
  5. Consider users with different types of color vision deficiencies by testing color combinations for text and background to ensure readability under various conditions.

Guidance on text contrast and size can be found at WCAG Quick Reference on Contrast (Minimum) and Resize Text.